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:

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:

Range Slider Events

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

DOM Events

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.

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>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  /*
  --f7-range-bar-active-bg-color: var(--f7-theme-color);
  --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-height: 5px;
  --f7-range-scale-text-color: #666;
  --f7-range-scale-substep-width: 1px;
  --f7-range-scale-substep-height: 4px;
}
.ios {
  --f7-range-size: 28px;
  --f7-range-bar-bg-color: #b7b8b7;
  --f7-range-bar-size: 1px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 28px;
  --f7-range-knob-color: #fff;
  --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --f7-range-label-size: 20px;
  --f7-range-label-text-color: #000;
  --f7-range-label-bg-color: #fff;
  --f7-range-label-font-size: 12px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-border-radius: 5px;
  --f7-range-label-padding: 0px;
  --f7-range-scale-step-width: 1px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md {
  --f7-range-size: 20px;
  --f7-range-bar-bg-color: #b9b9b9;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 0px;
  --f7-range-knob-size: 12px;
  /*
  --f7-range-knob-color: var(--f7-theme-color);
  */
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 26px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-text-color: #fff;
  /*
  --f7-range-label-bg-color: var(--f7-theme-color);
  */
  --f7-range-label-font-size: 10px;
  --f7-range-label-border-radius: 50%;
  --f7-range-label-padding: 0px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.aurora {
  --f7-range-size: 20px;
  --f7-range-bar-bg-color: #c7c7c7;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 16px;
  /*
  --f7-range-knob-color: var(--f7-theme-color);
  */
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 20px;
  --f7-range-label-text-color: #fff;
  /*
  --f7-range-label-bg-color: var(--f7-theme-color);
  */
  --f7-range-label-font-size: 10px;
  --f7-range-label-font-weight: 600;
  --f7-range-label-border-radius: 4px;
  --f7-range-label-padding: 0px 4px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 11px;
  --f7-range-scale-font-weight: 500;
  --f7-range-scale-label-offset: 2px;
}

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 if-not-md">speaker_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 if-not-md">speaker_3_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 if-not-md">sun_min</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 if-not-md">sun_max</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 if-not-md">money_dollar_round</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 if-not-md">money_dollar_round_fill</i>
        <i class="icon material-icons md-only">monetization_on</i>
      </div>
    </li>
  </ul>
</div>
<div class="block-title">With Scale</div>
<div class="block block-strong">
  <div class="range-slider range-slider-init"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="5"
    data-value="25"
    data-scale="true"
    data-scale-steps="5"
    data-scale-sub-steps="4"
  ></div>
</div>
<div class="block-title">Vertical</div>
<div class="block block-strong display-flex justify-content-center">
  <div class="range-slider range-slider-init margin-right"
    data-vertical="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value="25"
    style="height: 160px"
  ></div>
  <div class="range-slider range-slider-init margin-horizontal"
    data-vertical="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value="50"
    style="height: 160px"
  ></div>
  <div class="range-slider range-slider-init margin-horizontal"
    data-vertical="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value="75"
    style="height: 160px"
  ></div>
  <div class="range-slider range-slider-init margin-left"
    data-dual="true"
    data-vertical="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value-left="25"
    data-value-right="75"
    style="height: 160px"
  ></div>
</div>
<div class="block-title">Vertical Reversed</div>
<div class="block block-strong display-flex justify-content-center">
  <div class="range-slider range-slider-init color-red margin-right"
    data-vertical="true"
    data-vertical-reversed="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value="25"
    style="height: 160px"
  ></div>
  <div class="range-slider range-slider-init color-red margin-horizontal"
    data-vertical="true"
    data-vertical-reversed="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value="50"
    style="height: 160px"
  ></div>
  <div class="range-slider range-slider-init color-red margin-horizontal"
    data-vertical="true"
    data-vertical-reversed="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value="75"
    style="height: 160px"
  ></div>
  <div class="range-slider range-slider-init color-red margin-left"
    data-dual="true"
    data-vertical="true"
    data-vertical-reversed="true"
    data-min="0"
    data-max="100"
    data-label="true"
    data-step="1"
    data-value-left="25"
    data-value-right="75"
    style="height: 160px"
  ></div>
</div>

Handle price change:

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

← Radio

Searchbar →