Is it possible to place two thumbs in slider?

Question

I want to place the two thumbs in the slider which shows the range of values using CSS and HTML5. Please help me. Right now I have a slider with one thumb. I need a slider which has different background with that range and two thumbs present in it. My code goes here:

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;  
}

The HTML is:

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

Now placing of two thumbs is what I want. I am still searching for background too.

On a more serious note, it's kinda hard to guess what exactly you're asking for. Can you elaborate/show examples/post code? — deceze, Mar 04 '11 at 08:48
Did you see my [answer](http://stackoverflow.com/questions/5178475/how-to-give-differnet-background-color-to-slider/5182914#5182914) to your question yesterday about slider background colours? — andyb, Mar 04 '11 at 09:17
Great, so how about replying on that question to tell me! I can't help if you don't reply! — andyb, Mar 04 '11 at 14:27

score 0 · Answer 1 · answered Jan 30 '12 at 17:35

You could use the html 5 range input element but it wont work on firefox and ie. Best bet is to use the jquery control so it works on all browsers. Check out this link for documentation, and I believe the example shows exactly what you want out of it.

Range slider example from 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 -->

Is it possible to place two thumbs in slider?

1 Answers1