Question

如何使用Jquery为输入字段创建滑块？

就像在此页面上一样：http://www.whoishostingthis.com/compare/ 价格和磁盘空间

Answer 1

您可以使用jQuery UI 看一眼： http://jqueryui.com/demos/slider/#steps

Answer 2

正如Kestutis所说，你可以使用jQuery UI Slider。它提供了一个slide事件，当滑块是 slid 时调用该事件。在该函数中，您可以使用ui.handle访问handle元素。你可以在每个增量处放入句柄上的任何文本。

例如，以下代码段会在滑动时显示滑块值，并在达到最大值时显示文本“无限制”。

$("#slider").slider({
    slide: function(event, ui) {
        if (ui.value == $(this).slider('option', 'max'))
            $(ui.handle).html('unlimited');
        else
            $(ui.handle).html(ui.value);
    }
});

您还需要稍微修改句柄的css样式：

.ui-slider .ui-slider-handle
{
    width: auto;
    padding: 0.2em;
    text-decoration:none;
}

查看实际操作：http://jsfiddle.net/william/TbAQd/。

<强>更新

您可以使用.slider('value', [value])功能设置滑块的值。您可能还想处理change事件，因此当值更改时，句柄也会更新。

请参阅此操作：http://jsfiddle.net/william/TbAQd/1/。

更新2

http://jsfiddle.net/william/TbAQd/3/

Jquery如何创建滑块？输入字段

2 个答案: