How to change slider switch text? [closed]

Answer 1

Does something like this work?

• http://jsfiddle.net/LgLPu/

JS

$('#set_slider').bind('change', function() {
    var activeLabel  = $('span.ui-slider-label');
    var mySlider     = $(this);
    var text         = mySlider.find('option:selected').text();
    var new_set      = 'Before';
    var new_off      = 'After';

    // changing the text does nothing
    //mySlider.find('option[value="0"]').text(new_set);
    //mySlider.find('option[value="1"]').text(new_off);

    // You need to update the ui-slider-label spans
    if(mySlider.val() == 0) {
        activeLabel.text(new_set);
    } else {
        activeLabel.text(new_off);        
    }

    mySlider.slider( 'refresh' ); // .trigger( 'create' )
});

HTML

<select name="set_slider" id="set_slider" data-role="slider" data-mini="false" >
    <option value="0" >SET</option>
    <option value="1" >OFF</option>
</select>

<!--
This is generated form the slider element:

<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 40.173913043478265%; ">OFF</span>
-->
​