jqueryui滑块小部件增强器jqueryui slider Pips实现问题

Question

我为jquery ui滑块小部件找到了特别有用的增强程序：jquery ui slider Pips，它几乎完全符合我的需求，除了一件事：

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

这就是我的结果。

问题是如何随着范围的增加而改变标签的出现频率？

谢谢！

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。