jquerytwitter-bootstrapsliderbootstrap-slider

Irregular bootstrap slider step values


I am using bootstrap slider http://seiyria.com/bootstrap-slider/ I want to select in irregular step values like, 14, 90, 360 days.

Example Link

<input id="ex1" data-slider-id='ex1Slider' type="text"  data-slider-step="1" data-slider-value="14" data-slider-ticks="[14, 90, 360]"
   data-slider-ticks-labels='["14 days", "90 days", "1 year"]'
   />
 var r = $('#ex1').slider()
            .on('slide', function(data){
               $("#ex6SliderVal").text(data.value)
            })
           ;

Any suggestions how to select only those defined values 14, 90, 360 etc.


Solution

  • I got this solved by author seiyria

    $(document).ready(function(){
    
      var realValues = [14, 60, 120, 365];
      var labelValues = ['14d', '60d', '120d', '365d'];
    
      var r = $('#ex1').slider({
        max: 3,
        min: 0,
        step: 1,
        ticks: [0, 1, 2, 3],
        formatter: function(val) {
          return labelValues[val];
        }
      })
      .on('change', function(data){
        console.log(data);
         $("#ex6SliderVal").text(data.value.newValue + ' ' + realValues[data.value.newValue])
      })
     ;
    })
    
     <input id="ex1" data-slider-id='ex1Slider' type="text"
           />
          <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
    

    Example Plunker