Thêm dấu tick vào thanh trượt jQuery?

Question

Làm cách nào để thêm dấu tick vào thanh trượt jQuery? Giả sử tôi có các giá trị từ 1 đến 10, làm thế nào tôi có thể thêm một dấu tích ở mỗi giá trị?

Tôi đã xem các bài đăng tương tự trên S.O. nhưng tất cả đều đề xuất các trình cắm và tôi muốn mã hóa khó khăn do có nhiều tương tác với các yếu tố khác.

Cảm ơn!

Answer 1

Similar to this SO Question. Câu trả lời từ Mortimer có thể giúp ích.

Mặc dù chưa có cách chính thức để thực hiện việc này, bạn nên để nó được nướng trong thanh trượt Giao diện người dùng jQuery.

Answer 2

Bạn có thể sử dụng hình nền có dấu ở đúng vị trí - đây có thể là cách đơn giản nhất.

Answer 3

đây là một giải pháp đơn giản giả định rằng khoảng thời gian trượt = 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

Cảm ơn Code-Toad. Tôi đổi mã của bạn để làm việc với phần trăm thay vì pixel, vì vậy bây giờ nó là miễn dịch với cửa sổ thay đổi kích thước:

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

Cảm ơn Arie Livshin và CodeToad. Mã trước đó giả định rằng giá trị nhỏ nhất luôn là 1. Tôi đã chỉnh sửa mã để làm việc với các giá trị nhỏ nhất.

$("#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); 
    } 
}