2015-08-31 2 views
2

Я использую слайдер bootstrap http://seiyria.com/bootstrap-slider/ Я хочу выбрать нерегулярные значения шагов, например, 14, 90, 360 дней.Нерегулярные значения шагов слайдера бутстрапа

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) 
      }) 
      ; 

Любые предложения, как выбрать только те определенные значения 14, 90, 360 и т.д.

+1

Вы можете попробовать этот слайдер: http://seiyria.com/bootstra р-слайдер /. См. Пример 13, где вы можете установить тики. Вы все равно можете остановить слайдер между значениями, но это может быть так хорошо, как вы можете получить без изменения плагина. – jonmrich

+1

Да, но я не хочу, чтобы пользователь мог выбирать между значениями – Naresh217

ответ

6

Я получил это решается автором 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

+0

Спасибо! Работает отлично :) – Novastorm

Смежные вопросы