jQuery rangeslider manipulating the rangeslider after creating - maikelbos0/VDT GitHub Wiki

It's possible to manipulate the rangeslider via client-side javascript. The rangeslider plugin can be called with a callback parameter function. The function provides access to the Rangeslider object via this as a first parameter. It is possible to call the rangeslider function multiple times on a selector; this will only create the slider once but provide access to the rangeslider on the first and on subsequent calls.

<script type="text/javascript">
    var selectedValues;
    
    $('#example-slider').rangeslider(function(slider) {
        // this refers to the rangeslider object
        selectedValues = this.getValue();
        
        // parameter slider also refers to the rangeslider object
        slider.setStep(5);
    });
</script>

When also providing options to the rangeslider, the callback function becomes the second parameter of the call to the rangeslider function.

<script type="text/javascript">
    var options = {
        getFieldName: function() { return 'range'; }
    };
    $('#example-slider').rangeslider(options, function () {
        console.log(this.getValue());
    });
</script>

Please note that this gives you access to the rangeslider internal properties. Manipulating these properties is unsupported and can create unexpected side effects.

Functions

  • remove() removes the rangeslider functionality and restores the elements to their original condition
  • setStep(step) sets the current step; steps are 0-based so step 0 corresponds with the range start value
  • getValue() returns the current value
  • setValue(value) sets the current value; invalid values are converted to values that are valid steps automatically
  • Internal functions
    • createElement(tagName, className, attr1, ..., attrN) creates elements with the appropriate attributes
    • getStepWidth() gets the width in pixels of each step on the current viewport
⚠️ **GitHub.com Fallback** ⚠️