# Range Sliders

Creates a flexible, attractive, mobile-friendly range slider input.

###

About the Plugin

Website GitHub npm

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.

###

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

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.0"></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";

###

Basic Usage

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"
    />

###

Options

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.

###

Custom Scripts

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.