滑块按钮上是否可以有 jQuery UI 滑块的值？答案

【问题标题】：Is it possible to have the value of the jQuery UI slider on the slider button?滑块按钮上是否可以有 jQuery UI 滑块的值？
【发布时间】：2012-01-08 02:02:29
【问题描述】：

我的客户要求我编写下面的 UI，滑块的值在实际的滑块按钮上。 http://img714.imageshack.us/img714/9043/sliderb.jpg

谁能指出阻力最小的方向？是否有可能使用 jQuery UI 滑块，或者我将不得不寻找其他地方？

非常感谢

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

确定：

$("#slider").slider({
    create: function () {
        /* Set the handle text to min value */
        $(this).find("a.ui-slider-handle").text($(this).slider("option", "min"));
    },
    slide: function (event, ui) {
        $(this).find("a.ui-slider-handle").text(ui.value);
    }
});

用一些 CSS 来修饰它，你肯定能够做到这一点：

a.ui-slider-handle { text-decoration: none; }

示例： http://jsfiddle.net/T5Y7k/1/

【讨论】：

非常感谢它工作得很好，我还有另一个问题。您如何对滑块上的值进行特定的捕捉？客户不想要说 10 的间隔，例如他想要 10,20,40,75,100,200。再次感谢
@user827570：这实际上是一个很好的问题。问一个新的问题可能会更好:)
@user827570：实际上，我会看看这个关于如何做到这一点的问题：stackoverflow.com/questions/967372/…

【解决方案2】：

如果您使用的是 Jquery，您可以获取滑块的值，然后使用 CSS 将该值放在滑块的元素上。

Jquery 允许您更改默认的 UI css 样式，因此您可以使用该元素的 ID 来根据需要进行更改。

jquery.ui.slider.css 样式表中引用了一些特定于小部件的类，这些类可以修改。检查http://jqueryui.com/demos/slider/#range，也检查该链接上的主题选项卡。

【讨论】：