I am wondering if it is possible to override the tick values in Bootstrap-Slider (latest v9.7.2 at time of post) to be a text string vs. the tick value.

In the screen shot below, the tick value "2" appears above the last select element on the slider. I want to be able to have the word "Speak" appear in stead. Is that possible?

Here is my HTML:

<div class="form-group">
  <label class="col-md-4 control-label" for="language_french">French</label>
  <div class="col-md-4">
    <input id="language_french" type="text" data-provide="slider"
      data-slider-ticks="[0, 1, 2]"
      data-slider-min="0"
      data-slider-max="2"
      data-slider-step="1"
      data-slider-value="0"
      data-slider-tooltip="show"
    />
  </div>
</div>

Here is my jQuery/JavaScript:

<script>
  // 
  var slider_002 = new Slider( '#language_french' );
</script>

Amended per answer from @Seiyria ... but it only works for the French language instance. No other language instance works:

<script>
  // 
  var values = ['None', 'Read', 'Speak'];
  var formatter = (index) => values[index];
  new Slider( '#language_english' );
  new Slider( '#language_french', { formatter } );
  new Slider( '#language_italian', { formatter } );
  new Slider( '#language_spanish', { formatter } );
</script>

I am wondering if it is possible to override the tick values in Bootstrap-Slider (latest v9.7.2 at time of post) to be a text string vs. the tick value.

In the screen shot below, the tick value "2" appears above the last select element on the slider. I want to be able to have the word "Speak" appear in stead. Is that possible?

Here is my HTML:

<div class="form-group">
  <label class="col-md-4 control-label" for="language_french">French</label>
  <div class="col-md-4">
    <input id="language_french" type="text" data-provide="slider"
      data-slider-ticks="[0, 1, 2]"
      data-slider-min="0"
      data-slider-max="2"
      data-slider-step="1"
      data-slider-value="0"
      data-slider-tooltip="show"
    />
  </div>
</div>

Here is my jQuery/JavaScript:

<script>
  // https://github./seiyria/bootstrap-slider
  var slider_002 = new Slider( '#language_french' );
</script>

Amended per answer from @Seiyria ... but it only works for the French language instance. No other language instance works:

<script>
  // https://github./seiyria/bootstrap-slider
  var values = ['None', 'Read', 'Speak'];
  var formatter = (index) => values[index];
  new Slider( '#language_english' );
  new Slider( '#language_french', { formatter } );
  new Slider( '#language_italian', { formatter } );
  new Slider( '#language_spanish', { formatter } );
</script>

• javascript
• bootstrap-slider

1 Answer 1

To acplish this you'll have to use the formatter function. An example can be found here (look at example #23).

In your case, it'll be something like this:

var values = ['None', 'Read', 'Speak']
var formatter = (index) => values[index]

new Slider('#language_french', { formatter })