Comment ajouter un marqueur à un curseur de l'interface utilisateur jQuery?

Question

J'ai un simple curseur d'interface utilisateur jQuery qui a une plage numérique de 25 à 35. Cela fonctionne très bien et la valeur par défaut est 28. J'espère ajouter une coche simple au curseur pour indiquer que 28 est l'emplacement par défaut est. Existe-t-il un moyen simple d'ajouter un indicateur?

$('#cycle_length').slider({ 
    range: "min", 
    value: 28, 
    min: 25, 
    max: 35, 
    step: 1, 
    slide: function(event, ui) { 
    $("#amount").val(ui.value); 
    } 
}); 
$("#amount").val($("#cycle_length").slider("value")); 

Answer 1

J'ai trouvé une grande mise en œuvre du curseur jQuery UI ici:

http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

Il est appelé le plugin selectToSlider et permet le placement des marques de tiques à travers le curseur, ainsi que la capacité de Ajoutez des étiquettes et des info-bulles.

Answer 2

vérifier la mise en œuvre à: http://jsbin.com/iwime

le principe est assez simple, vous spécifiez vos tiques puis vous les placez à l'intérieur du curseur par incréments, en spécifiant la position en%, donc si vous aviez 10 tiques, vous pouvez les placer à 0%, 10%, 20%, 30% .... 90%

Vous pouvez également générer automatiquement la liste des graduations à partir du min et du max, sachant à quel intervalle vous voulez les graduations.