¿Añadir marcas al control deslizante jQuery?

Question

¿Cómo agrego las marcas al control deslizante jQuery? Digamos que tengo valores del 1 al 10, ¿cómo puedo agregar un tic en cada valor?

He visto publicaciones similares en S.O. pero todos sugieren complementos, y me gustaría codificarlo debido a mucha interactividad con otros elementos.

Gracias!

Answer 1

Similar to this SO Question. La respuesta de Mortimer podría ayudar.

Aunque todavía no hay una forma oficial de hacerlo, sería bueno tenerlo cocido en el control deslizante de la jQuery UI.

Answer 2

Puede utilizar una imagen de fondo que tenga las marcas en los lugares correctos; esta sería probablemente la forma más sencilla.

Answer 3

aquí es una solución sencilla si se asume que el intervalo deslizante = 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

Gracias Código-sapo. He modificado el código para trabajar con porcentajes en lugar de píxeles, por lo que ahora es inmune a la ventana de cambio de tamaño:

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

Gracias Arie Livshin y CodeToad. El código anterior asume que el valor mínimo es siempre 1. Edité el código para trabajar con valores mínimos también.

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