Question

我发现jquery ui滑块小部件特别有用的增强器：jQuery-ui-Slider-Pips，几乎完全符合我的需求，除了一件事：

我正在尝试从上面提到的demopage实现$ awesome2示例，但我需要更大的范围：{min:-100,max:100}

和here is我的结果。

问题是如何更改标签外观频率以及范围增量？

谢谢！

Answer 1

你的问题似乎有点模糊，但我会假设你想要这样的东西？ http://jsfiddle.net/3qva9yfo/1/

滑块看起来的所有自定义都应该用CSS来完成，所以基本上只需要改变CSS：

#awesome2 .ui-slider-pip:nth-of-type(5n+1) > .ui-slider-line {
    height: 6px;
    background: #777;
}

#awesome2 .ui-slider-pip:nth-of-type(5n+1) > .ui-slider-label {
    display: block;
    top: 8px;
    color: #ccc;
    font-size: 0.8em;
}

#awesome2 .ui-slider-pip:nth-of-type(10n+1) > .ui-slider-line {
    height: 10px;
    background: #222;
}

#awesome2 .ui-slider-pip:nth-of-type(10n+1) > .ui-slider-label {
    display: block;
    top: 12px;
    color: #333;
    font-size: 1em;
}

为：

#awesome2 .ui-slider-pip:nth-of-type(1n+1) > .ui-slider-line {
    height: 6px;
    background: #777;
}

#awesome2 .ui-slider-pip:nth-of-type(1n+1) > .ui-slider-label {
    display: block;
    top: 8px;
    color: #ccc;
    font-size: 0.8em;
}

#awesome2 .ui-slider-pip:nth-of-type(5n+1) > .ui-slider-line {
    height: 10px;
    background: #222;
}

#awesome2 .ui-slider-pip:nth-of-type(5n+1) > .ui-slider-label {
    display: block;
    top: 12px;
    color: #333;
    font-size: 1em;
}

请记住，将来我们需要知道你想要什么，以帮助你获得它：）

的Si。

jqueryui滑块小部件增强器jQuery-ui-Slider-Pips实现问题

1 个答案: