Question

我想在javascript中编写一个范围滑块，其中的spefic条颜色不依赖于选择器的位置。我该怎么办？

我的灵感来自以下website

Answer 1

使用jQuery：

HTML：

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

CSS：

#slider
{
    background-color:red;
    background-position:left;
    background-repeat:no-repeat;
    background-size:10px;
}

使用Javascript：

$(function() {
    $( "#slider" ).slider(
    {
        slide:function(event, ui){
            //This is what the original code for this example looks like.
            //It's for changing the white/red area when the slider moves.
            //var w = $(ui.handle).css("left");
            //$(this).css("background-size",w);

            //Notice how when you set the "w" value to a static value it
            //will keep the white/red space static as well?  So you can 
            //change the colored space with whatever logic you want to use.
            $(this).css("background-size",50);
        }   
    });
});

做任何你想要做的事情，包括改变背景的宽度和颜色。看起来像你的例子的网站是基于在租赁和购买之间的门槛上进行的计算，以及当一个人变得理想而不是另一个时。

如何制作具有特殊条形颜色的范围滑块

1 个答案: