Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I add a Marker to a jQuery UI Slider?

I have a simple jQuery UI slider that has a numerical range from 25 to 35. It works fine and the default value is 28. I'm hoping to add a simple tick mark to the slider to indicate that 28 is where the default is. Is there a simple way to add an indicator?

$('#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" ) );
like image 578
Bijan Avatar asked Dec 14 '10 02:12

Bijan


1 Answers

I found a great implementation of the jQuery UI slider here:

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

It's called the selectToSlider plugin and allows for the placement of tick marks throughout the slider as well as the ability to add labels and tooltips.

like image 190
Bijan Avatar answered Oct 01 '22 15:10

Bijan