在滑块中放置两个拇指是否可行？

Question

我想在使用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" />

现在我想要的是放置两个拇指。我还在寻找背景。

- priya

---

请小心，不要让你的手卡在那里。 - deceze

说正经的，有点难猜出你具体在问什么。你能详细说明/展示例子/发布代码吗？ - deceze

当然可以。让我编辑一下我的问题。 - priya

你昨天看到我关于滑块背景颜色的问题的答案了吗？ - andyb

哑...那对我没用。 - priya

太好了，那你回答一下问题怎么样！如果你不回答，我就无法帮助你！ - andyb

Answer 1

你可以使用HTML 5的范围输入元素，但它在Firefox和IE上不起作用。最好的选择是使用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 -->

- PAULDAWG