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.com/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.com/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>
To accomplish 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: