jqueryuiスライダウィジェットエンハンサjQuery-ui-Slider-Pipsの実装問題 - jquery、jquery-ui、jquery-ui-slider

私はjquery uiスライダーウィジェットの特に便利なエンハンサーを見つけました。 jQuery-ui-Slider-Pips、それは私のニーズにほぼ正確に適合しますが、1つだけ例外があります。

上記のデモページから$ awesome2の例を実装しようとしていますが、より広い範囲が必要です： {min:-100,max:100}

そして ここは 私が結果として持っているもの。

問題は、範囲の増分とともにラベルの表示頻度を変更する方法ですか？

ありがとう！

回答：

あなたの質問は少しあいまいに思えますが、私はあなたがこのようなものを望んでいると思いますか？ 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。