jQueryスライダに目盛りを追加しますか？

Question

jQueryスライダに目盛りを追加するにはどうすればよいですか？ 1から10の値があるとしたら、どのように各値にティックを追加できますか？

私はS.O.に似た記事を見ました。しかし、それらはすべてプラグインを提案しています。他の要素との多くの対話性のために、ハードコードしたいと思います。

ありがとうございます！

Answer 1

Similar to this SO Question。モルティマーの答えが助けになるかもしれません。

まだ正式な方法はありませんが、jQuery UIスライダーで焼いてもいいですね。ここ

Answer 2

適切な場所にマークが付いた背景画像を使用できます。これはおそらく最も簡単な方法です。

Answer 3

は、そのスライダー間隔= 1

function setSliderTicks(){ 
    var $slider = $('#slider'); 
    var max = $slider.slider("option", "max");  
    var spacing = $slider.width()/(max -1); 

    $slider.find('.ui-slider-tick-mark').remove(); 
     for (var i = 0; i < max ; i++) { 
      $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + 'px').appendTo($slider);      
     } 
} 


.ui-slider-tick-mark{ 
display:inline-block; 
width:2px; 
background:black; 
height:16px; 
position:absolute; 
top:-4px; 
} 

Answer 4

おかげコード - ヒキガエルを想定したシンプルなソリューションです。私は、今ではウィンドウサイズ変更に対する免疫だ、パーセントの代わりに、ピクセルで動作するようにコードを変更：

Javascriptを：

function setSliderTicks(){ 
    var $slider = $('#slider'); 
    var max = $slider.slider("option", "max");  
    var spacing = 100/(max -1); 

    $slider.find('.ui-slider-tick-mark').remove(); 
    for (var i = 0; i < max ; i++) { 
     $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider); 
    } 
} 

CSS：

.ui-slider-tick-mark{ 
    display:inline-block; 
    width:2px; 
    background:black; 
    height:16px; 
    position:absolute; 
    top:-4px; 
} 

Answer 5

おかげアリーLivshinとCodeToad。前のコードでは、最小値は常に1であると仮定しています。最小値でも動作するようにコードを編集しました。

$("#users-slider").slider(
    { 
    range: "min", 
    value: 3, 
    min: 3, 
    max: 6, 
    create: function(event, ui) { 
     setSliderTicks(event.target); 
    }, 
    } 
); 

function setSliderTicks(el) { 
    var $slider = $(el); 
    var max = $slider.slider("option", "max");  
    var min = $slider.slider("option", "min");  
    var spacing = 100/(max - min); 

    $slider.find('.ui-slider-tick-mark').remove(); 
    for (var i = 0; i < max-min ; i++) { 
     $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider); 
    } 
}