Range Sliders

Create beautiful, mobile-friendly range slider inputs with the Ion Rangeslider library.

Powerful slider functionality can be created through data-attributes, with optional custom javascript to handle change events on the slider.

1. Include the library in your page

   • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

     <!-- Ion rangeSlider (flexible and pretty range slider elements) -->
     <script type="text/javascript" src="assets/js/ion.rangeSlider.min.js"></script>

     Alternatively you may wish to load this resource from a CDN to potentially improve page load times.

     <!-- Ion rangeSlider (flexible and pretty range slider elements) -->
     <script type="text/javascript" src="https://unpkg.com/ion-rangeslider@~2.3.1"></script>

2. Load the initializer code in index.js

   • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.

     import mrIonRangeSlider from './ion-rangeslider';

   • Ensure the following line appears in the export object:

     export {
     mrIonRangeSlider,
     };

3. Load the required CSS in components.scss

   • Declare the following import statement in scss/custom/components.scss:

   @import "components/optional/ion-rangeslider";

Create an <input type="text"> and add the data-ion-rangeslider attribute. All other options are provided through data attributes.

A range slider may be configured with single or double handles. from refers to the left-most handle on the slider (lower range).

from is used when the slider is a single-handle (Eg. data-type="single").

to refers to the right-most handle (upper range) when the slider is a double-handle type (Eg. data-type="double").

<input type="text"
  data-ion-rangeslider
  data-values="1,2,3,4,5,6,7,8,9,10,11+"
  data-from="2"
  data-step="1"
  data-grid="true"
  data-grid-snap="true"
  data-on-change="mrUpdatePrice"
  data-unit-selector=".js-users-word"
  data-unit-single="User"
  data-unit-plural="Users"
  data-from-selector=".js-users-per-month"
  data-hide-from-to="true"
/>

For a full list of options, refer to the Ion Rangeslider Documentation.

Below is a list of additional options provided in this theme:

Option	Type	Default	Description
data-from-selector	string	null	Provide a selector for a separate <input type="text">. Sets a listener to the change event on the external input which then updates the from handle position of the slider with the value entered in the external input. The value of this input will also be updated when the slider is moved, using the slider's from_value if available. Otherwise uses from.
data-to-selector	string	null	Provide a selector for a separate <input type="text">. Sets a listener to the change event on the external input which then updates the to handle position of the slider with the value entered in the external input. The value of this input will also be updated when the slider is moved.
data-unit-selector	string	null	Provide a selector for an element (or elements) which will receive the unit text in single or plural form. The text of this element will be updated each time the slider is moved. data-unit-single and data-unit-plural must be set for this setting to take effect.
data-unit-single	string		A word describing what the slider is measuring in single form. Eg. day, person, transaction, inch.
data-unit-plural	string		A word describing what the slider is measuring in plural form. Eg. days, people, transactions, inches.

A callback function can be called each time a slider is moved. Provide the name of the function in the data-on-update attribute. The function will be provided all available data on the slider's current state.

See Ion Rangeslider Documentation for full information on format of the data object.

To see all available data in the data object, log it to the console:

<script type="text/javascript">
 var sliderUpdateCallback = function(data){
   console.log(data);
 };
</script>

Taken from our Leap Theme, this example is a detailed demo on how the slider could be used to update the price on a pricing page.

Javascript

<!-- This function is used as a callback from the ionRangeSlider 
     to calculate a price based on slider value.
     With each update, the function is passed a data object
     from Ion Rangeslider -->

<script type="text/javascript">
  var mrUpdatePrice = (function(){
    var priceElements = document.querySelectorAll('.js-price-per-month');
    var dollarSign = document.querySelector('.js-dollar-sign');
    var hideSignup = document.querySelectorAll('.js-pricing-charge-description');
    var prices = ['Free','99','120','169','209','239','279','299','329','369','Contact us'];
    var updatePrice = function(data){
      // Hide or show dollar sign based on value "FREE" or "Contact us"
      if (dollarSign){
        dollarSign.classList[data.from < 1 || data.from == 10 ? 'add' : 'remove']('d-none');
      }

      theme.mrUtil.forEach(hideSignup, function(index, element) {
        element.classList[data.from === 10 ? 'add' : 'remove']('d-none');
      });

      theme.mrUtil.forEach(priceElements, function(index, element) {
        element.textContent = prices[data.from];
      });
    };
    return updatePrice;
  })();
</script>

HTML

<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-6">
        <form>
          <div>
            <label class="h5">Select your number of users</label>
            <input type="text" data-ion-rangeslider 
              data-values="1,2,3,4,5,6,7,8,9,10,11+"
              data-from="2" data-step="1" data-grid="true"
              data-grid-snap="true"
              data-on-change="mrUpdatePrice"
              data-unit-selector=".js-users-word"
              data-unit-single="User"
              data-unit-plural="Users"
              data-from-selector=".js-users-per-month"
              data-hide-from-to="true" />
          </div>
          <div class="mt-5 card card-body justify-content-center text-center shadow-3d">
            <div class="text-muted">
              <span class="js-users-per-month">3</span>
              <span class="js-users-word">Users</span>
            </div>
            <div class="d-flex justify-content-center my-3">
              <span class="h3 pt-1 mr-1 js-dollar-sign">$</span>
              <span class="display-3 js-price-per-month">120</span>
            </div>
            <div class="text-small text-muted js-pricing-charge-description">Total charge per month</div>
            <button class="btn btn-lg btn-primary mt-3 js-pricing-submit-button" type="submit">Get started</button>
          </div>
        </form>

      </div>
    </div>
    <div class="row">
      <div class="col text-center">
        <span>Interested in a custom plan? <a href="#">Get in touch</a>
        </span>
      </div>
    </div>
  </div>
</section>

See Ion Rangeslider Documentation for full information on format of the data object.