jQuery UI滑块 - 它看起来像这样吗？

Question

jQuery UI Slider可以看起来像这样吗？如果是这样的话？

Answer 1

修改：使用range slider

时可以

DEMO

#slider {
 margin: 10px;
 height: 3px;    
}
#slider a {
    background-image: url("<!-- Your image -->") !important;
}

#slider .ui-slider-range { background-color: #58BEEA; background-image: none; }

可以像你拥有的那样更改jQuery滑块，但是蓝色＆amp;只有CSS用于常规滑块才能表示进度区域的灰色部分。

你可以把它带到添加div的极端......但对于一个简单的滑块来说它太多了。

#slider {
 margin: 10px;
 height: 3px;    
}
#slider a {
    background-image: url("<!-- Your image for sider-->") !important;
}

DEMO

Answer 2

是。通过使用图像。处理程序是一个a元素，因此在css中将其设置为处理程序图像的高度，并将图像设置为背景图像。

这基本上就是你需要做的一切......其余部分由滑块插件支持。

Answer 3

是的，我想是的。唯一的问题是径向渐变和滑块的形状。此外，它永远不会在IE中工作。我会告诉你如何，但我需要对滑块的自定义进行一些研究。

修改

我不知道JQuery UI是如何工作的，但是如果它们只是div我会使用的CSS，我相信它可以以某种方式使用：

/*Bar*/
#barblue, #bargrey {
height:5px;
border-radius: 2px;
background-color: deepskyblue;
border: 1px solid darkcyan;
width: 50%;
box-shadow: inset 0px 0px 2px darkcyan;
}
#bargrey {
background-color: lightgrey;
border-color: grey;
box-shadow: inset 0px 0px 2px grey;
}
/*Slider*/
#slider {
border-radius: 50px 50px 90px 90px;
border: 1px solid grey;
height: 20px;
width: 15px;
background: grey;
box-shadow: 0px 0px 2px grey;
}

对于滑块，您必须使用图像来获得金属外观。

Answer 4

正如@Sander Bruggeman所说。

如果你看下面的标记和css支持它。它使用背景图像来渲染滑块的状态。但这是你在理论上如何做到的。

在以下标记中，您添加另一个div以支持您的蓝色路径状态。

<div class="demo">

    <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <div class="blue-path-state"></div>
        <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%; "></a>
    </div>

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

要更新.blue-path-state，你需要监听change事件，如果你仔细阅读滑块的文档，你可以在该事件上运行自定义函数，这将更新.blue-path的背景图像-state用蓝色背景覆盖路径以创建蓝色填充，并通过更改事件和自定义函数调整蓝色路径状态的宽度或背景位置。

例如，您可以执行更新功能。

var slider = $( ".selector" );
var blue_path = $('.blue-path-state',slider);
slider.slider({
    change: function(event, ui) {
        blue_path.css('width':slider.slider( "value" )); // set width of the blue line
    }
});

Answer 5

当然，我最近做了一个像你一样的滑块，基本上你需要将这3个作为图像，左边的蓝色条带表示到目前为止所取得的进展，右边的灰色条纹显示进度要完成的。滑块图标也必须是绝对位置的图像。检查Firebug，这是您需要提供这些背景图像的确切类别。