在jQuery滑块上添加刻度线？
如何在jQuery滑块上添加刻度线？ 假设我有1到10的值，我怎么能在每个值上添加勾号？
我在SO上看过类似的post，但他们都建议使用插件，我想通过与其他元素进行大量交互来对其进行硬编码。
谢谢！
与此SO问题类似 。 Mortimer的答案可能有所帮助。
虽然还没有正式的方法，但是在jQuery UI滑块中加入它会很好。
谢谢Code-Toad。 我修改了你的代码以使用百分比而不是像素，所以现在它不受窗口resize的影响：
使用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++) { $('').css('left', (spacing * i) + '%').appendTo($slider); } } CSS：
.ui-slider-tick-mark{ display:inline-block; width:2px; background:black; height:16px; position:absolute; top:-4px; }
感谢Arie 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++) { $('').css('left', (spacing * i) + '%').appendTo($slider); } }
假设滑块间隔= 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++) { $('').css('left', (spacing * i) + 'px').appendTo($slider); } } .ui-slider-tick-mark{ display:inline-block; width:2px; background:black; height:16px; position:absolute; top:-4px; }
您可以使用在正确位置具有标记的背景图像 – 这可能是最简单的方法。