Можно ли разместить два больших пальца в слайдере?

Question 1

Я хочу поместить два больших пальца в ползунок, который показывает диапазон значений с использованием CSS и HTML5. Пожалуйста помогите. Прямо сейчас у меня есть ползунок с одним большим пальцем. Мне нужен ползунок, который имеет другой фон с этим диапазоном и двумя большими пальцами, присутствующими в нем. Мой код идет здесь:

input[type=range] {
    border: 1px solid #4ba8b1;
    margin: 0px 0px 5px 5px;
    background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
    float:left;
    pointer:cursor;
    -webkit-appearance:none;
    width:300px;
    height:7px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
input[type=range]:hover::-webkit-slider-thumb {     
    -webkit-appearance:none;
    background:url(images/Slider_v9.0_2.png);
    background-position:center;
    width:18px;
    height:27px;  
}

input[type=range]::-webkit-slider-thumb {     
    -webkit-appearance:none;
    background:url(images/Slider_v9.0_1.png);
    background-position:center;
    width:18px;
    height:27px;  
}


input[type=range]:active::-webkit-slider-thumb {     
    -webkit-appearance:none;
    background:url(images/Slider_v9.0_4.png);
    background-position:center;
    width:18px;
    height:27px;  
}

HTML:

<input type="range" min="0" max="150" value="30" />

Теперь размещение двух больших пальцев - это то, что я хочу. Я все еще ищу фон тоже.

css html

3

priya 4 Мар 2011 в 11:31

3

Только будьте осторожны, чтобы ваши руки не застряли там.

–

deceze

4 Мар 2011 в 11:35

1

А если серьезно, то довольно сложно догадаться, о чем именно вы просите. Можете ли вы уточнить/показать примеры/почтовый код?

–

deceze

4 Мар 2011 в 11:48

Да конечно. позвольте мне отредактировать мой вопрос.

–

priya

4 Мар 2011 в 11:54

Вы видели мой ответ на ваш вопрос? вчера о цветах фона слайдера?

–

andyb

4 Мар 2011 в 12:17

1

Отлично, так как насчет ответа на этот вопрос, чтобы сказать мне! Я не смогу помочь, если ты не ответишь!

–

andyb

4 Мар 2011 в 17:27

Answer

Вы можете использовать элемент ввода диапазона html 5, но он не будет работать в Firefox и т.д. Лучше всего использовать элемент управления jquery, чтобы он работал во всех браузерах. Проверьте эту ссылку для документации, и я считаю, что пример показывает именно то, что вы хотите от него.

Пример ползунка диапазона из jquery

<meta charset="utf-8">
    <style>
    #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>



<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->

0

PAULDAWG 30 Янв 2012 в 21:35

Question 2

Вы можете использовать элемент ввода диапазона html 5, но он не будет работать в Firefox и т.д. Лучше всего использовать элемент управления jquery, чтобы он работал во всех браузерах. Проверьте эту ссылку для документации, и я считаю, что пример показывает именно то, что вы хотите от него.

Пример ползунка диапазона из jquery

<meta charset="utf-8">
    <style>
    #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
    </script>



<div class="demo">

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-range"></div>

</div><!-- End demo -->

0

PAULDAWG 30 Янв 2012 в 21:35

Можно ли разместить два больших пальца в слайдере?

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

css