CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-slider
rob.m
rob.m

Reputation: 10571

How to use strings instead of numbers in a slider?

I am using bootstrap slider and I am doing:

Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/> <b>31</b>

launching it with $("#days").slider({});

That works but what if I wanted to create a slider for months, using strings not numbers?

Months: <b>January</b> <input id="months" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[January, February, March]"/> <b>March</b>

launching it with $("#months").slider({});

That gives:

Error: Invalid input value '[January, February, March]' passed in

jsFiddle here

Upvotes: 1

Views: 1400

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/pz3ce0o6/1286/

    $("#days, #years, #months").slider({
      tooltip: 'always'
    });
.col-xs-4 {
  margin-bottom: 40px;
}

.slider.slider-horizontal .slider-tick-label-container {
  margin-top: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"></script>
    <div class="row" id="time" >
      <div class="col-xs-4">
        Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/> <b>31</b>
      </div>
      <div class="col-xs-4">
        Months: <input id="months" type="text" class="span2" value="" 
          data-slider-min="1" 
          data-slider-max="12"
          data-slider-step="1" 
          data-slider-ticks="[1, 2, 3]"
          data-slider-ticks-labels='["January", "February", "March"]' />
      </div>
      <div class="col-xs-4">
        Years: <b>0</b> <input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/> <b>Today</b>
      </div>
    </div>

Reference: http://seiyria.com/bootstrap-slider/ . Check example 19.

Hope this will help you.

Upvotes: 1

Related Questions