Range Slider

    Range Slider Layout

    Single Range

    Single range slider layout is pretty simple:

    <!-- Range Slider element -->
    <div class="range-slider">
      <!-- range input -->
      <input type="range" min="0" max="100" step="1" value="10">
    </div>

    Dual Range

    Dual range slider is more simpler as it doesn't require input element because input:range doesn't support dual range:

    <!-- Range Slider element -->
    <div class="range-slider"></div>

    Range Slider Colors

    Range Slider supports all default colors. So to change its color just add color-[color] class to range slider element.

    <!-- red range -->
    <div class="range-slider color-red">...</div>
    
    <!-- orange range -->
    <div class="range-slider color-orange">...</div>

    Range Slider App Methods

    Let's look at related App methods to work with Range Slider:

    app.range.create(parameters)- create Range Slider instance

    • parameters - object. Object with range slider parameters

    Method returns created Range Slider's instance

    app.range.destroy(el)- destroy Range Slider instance

    • el - HTMLElement or string (with CSS Selector) or object. Range Slider element or Range Slider instance to destroy.

    app.range.get(el)- get Range Slider instance by HTML element

    • el - HTMLElement or string (with CSS Selector). Range Slider element.

    Method returns Range Slider's instance

    app.range.getValue(el)- get Range Slider value

    • el - HTMLElement or string (with CSS Selector). Range Slider element.

    Method returns range slider value

    app.range.setValue(el, value)- set new Range Slider value

    • el - HTMLElement or string (with CSS Selector). Range Slider element.
    • value - number (in case of single range) or array of values (in case of dual range)

    Method returns Range Slider's instance

    Range Slider Parameters

    Now let's look at list of available parameters we need to create Range Slider:

    Parameter Type Default Description
    el HTMLElement
    string
    Range Slider element. HTMLElement or string with CSS selector of range slider element
    inputEl HTMLElement
    string
    Range Slider input element or CSS selector of input element. If not specified, will try to look for input type="range" inside of range slider element
    dual boolean false Enable dual range slider
    step number 1 Minimal step between values
    label boolean false Enables additional label around range slider knob
    min number Minimum value
    max number Maximum value
    value number
    array
    Initial value. Number in case of single range, and array of values in case of dual range
    draggableBar boolean true When enabled it is also possible to interact with range slider (change value) on range bar click and swipe.
    on object Object with events handlers. For example:
    var range = app.range.create({
      el: '.range-slider'
      on: {
        change: function () {
          console.log('Range Slider value changed')
        }
      }
    })
    

    Range Slider Methods & Properties

    So to create Range Slider we have to call:

    var range = app.range.create({ /* parameters */ })

    After that we have its initialized instance (like range variable in example above) with useful methods and properties:

    Properties
    range.app Link to global app instance
    range.el Range Slider HTML element
    range.$el Dom7 instance with range slider HTML element
    range.inputEl Range Slider input HTML element
    range.$inputEl Dom7 instance with range slider input HTML element
    range.rangeWidth Range slider width (in px)
    range.dual Boolean property indicating whether it is dual or not
    range.min Range min value
    range.max Range max value
    range.value Range value
    range.knobs Array where each element represents HTMLElement of created range knob (2 knobs in case of dual slider)
    range.labels Array where each element represent HTMLElement of created range knob label (2 labels in case of dual slider)
    range.params Range Slider parameters
    Methods
    range.getValue() Returns range slider value
    range.setValue(value) Set new range slider value
    range.destroy() Destroys range slider instance
    range.on(event, handler) Add event handler
    range.once(event, handler) Add event handler that will be removed after it was fired
    range.off(event, handler) Remove event handler
    range.off(event) Remove all handlers for specified event
    range.emit(event, ...args) Fire event on instance

    Range Slider Events

    Range Slider will fire the following DOM events on range element and events on app and range instance:

    DOM Events

    Event Target Description
    range:change Range Slider Element<div class="range-slider"> Event will be triggered when Range Slider value has been changed
    range:changed Range Slider Element<div class="range-slider"> Event will be triggered on slider knob release after value change
    range:beforedestroy Range Slider Element<div class="range-slider"> Event will be triggered right before Range Slider instance will be destroyed

    App and Range Slider Instance Events

    Range Slider instance emits events on both self instance and app instance. App instance events has same names prefixed with range.

    Event Arguments Target Description
    change (range) range Event will be triggered when range value has been changed. As an argument event handler receives range instance
    rangeChange (range) app
    changed (range) range Event will be triggered on slider knob release after value change. As an argument event handler receives range instance
    rangeChanged (range) app
    beforeDestroy (range) range Event will be triggered right before Range Slider instance will be destroyed. As an argument event handler receives range instance
    rangeBeforeDestroy (range) app

    Range Slider Auto Initialization

    If you don't need to use Range Slider API and your Range Slider is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional range-slider-init class:

    <!-- Add range-slider-init class -->
    <div class="range-slider range-slider-init">
      <input type="range" min="0" max="100" step="1" value="10">
    </div>

    In this case if you need to access created Range Slider instance you can use the app.range.get app method:

    var range = app.range.get('.range-slider');
    
    if (range.value > 50) {
      // do something
    }

    When using auto init you may need to pass additional parameters. It can be done with two ways:

    • In you case you use single-range slider and you have input:range inside, then step, min, max, value parameters can be set from same input attributes:

      <!-- min, max, step, value parameters will be set for same input attributes -->
      <div class="range-slider range-slider-init">
        <input type="range" min="0" max="100" step="1" value="10">
      </div>
    • Otherwise, if you don't have input:range inside or you use dual range input you can set all available parameters via data- attributes on range slider element.

      <!-- parameters set via data- attributes -->
      <div
        class="range-slider range-slider-init"
        data-min="0"
        data-max="100"
        data-step="10"
        data-label="true"
        data-value="50"
      ></div>

      In case you have dual range slider, then you need to pass to values using data-value-left and data-value-right attributes:

      <!-- parameters set via data- attributes -->
      <div
        class="range-slider range-slider-init"
        data-dual="true"
        data-min="0"
        data-max="100"
        data-step="10"
        data-label="true"
        data-value-left="30"
        data-value-right="60"
      ></div>
      

    Examples

    <div class="block-title">Volume</div>
    <div class="list simple-list">
      <ul>
        <li>
          <div class="item-cell width-auto flex-shrink-0">
            <i class="icon f7-icons ios-only">volume_mute_fill</i>
            <i class="icon material-icons md-only">volume_mute</i>
          </div>
          <div class="item-cell flex-shrink-3">
            <!-- range slider -->
            <div class="range-slider range-slider-init">
              <input type="range" min="0" max="100" step="1" value="10">
            </div>
          </div>
          <div class="item-cell width-auto flex-shrink-0">
            <i class="icon f7-icons ios-only">volume_fill</i>
            <i class="icon material-icons md-only">volume_up</i>
          </div>
        </li>
      </ul>
    </div>
    
    <div class="block-title">Brightness</div>
    <div class="list simple-list">
      <ul>
        <li>
          <div class="item-cell width-auto flex-shrink-0">
            <i class="icon f7-icons ios-only">circle</i>
            <i class="icon material-icons md-only">brightness_low</i>
          </div>
          <div class="item-cell flex-shrink-3">
            <!-- range slider, enable labels -->
            <div class="range-slider range-slider-init color-orange" data-label="true">
              <input type="range" min="0" max="100" step="1" value="50">
            </div>
          </div>
          <div class="item-cell width-auto flex-shrink-0">
            <i class="icon f7-icons ios-only">circle_half</i>
            <i class="icon material-icons md-only">brightness_high</i>
          </div>
        </li>
      </ul>
    </div>
    <div class="block-title display-flex justify-content-space-between">Price Filter <span class="price-value">$200 - $400</span></div>
    <div class="list simple-list">
      <ul>
        <li class="item-row">
          <div class="item-cell width-auto flex-shrink-0">
            <i class="icon f7-icons ios-only">money_dollar</i>
            <i class="icon material-icons md-only">attach_money</i>
          </div>
          <div class="item-cell item-cell-shrink-3">
            <!-- Dual range slider with all the parameters passed via data- attributes -->
            <div
              id="price-filter"
              class="range-slider range-slider-init color-green"
              data-label="true"
              data-dual="true"
              data-min="0"
              data-max="500"
              data-step="1"
              data-value-left="200"
              data-value-right="400"
            ></div>
          </div>
          <div class="item-cell width-auto flex-shrink-0">
            <i class="icon f7-icons ios-only">money_dollar_fill</i>
            <i class="icon material-icons md-only">monetization_on</i>
          </div>
        </li>
      </ul>
    </div>

    Handle price change:

    $$('#price-filter').on('range:change', function (e, range) {
      $$('.price-value').text('$'+(range.value[0])+' - $'+(range.value[1]));
    });