Range Slider

It is an easy and responsive range slider.

How to use?

To add hs.range-slider.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css"></link>
Copy

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

<script src="../../assets/js/components/hs.range-slider.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  // initialization of summernote plugin
  $(document).on('ready', function () {
    $.HSCore.components.HSRangeSlider.init('.js-range-slider');
  });
</script>
Copy

Default 

<input type="text" class="js-range-slider" data-extra-classes="u-range-slider">
Copy

Min and max value

Use data-min="100" and data-max="1000" attributes

550 
<input type="text" class="js-range-slider"
       data-extra-classes="u-range-slider u-range-slider-indicator"
       data-type="single"
       data-hide-from-to="false"
       data-min="100"
       data-max="1000"
       data-from="550">
Copy

Grid

Use data-grid="true" attribute

20080002505007501 000 
<input type="text" class="js-range-slider"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="0"
       data-max="1000"
       data-from="200"
       data-to="800">
Copy

Steps

Use data-step="250" attribute

-500500-1 00005001 000 
<input type="text" class="js-range-slider"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="-1000"
       data-max="1000"
       data-from="-500"
       data-to="500"
       data-step="250">
Copy

Prefix "$"

Use data-prefix="$" attribute

$200$80002505007501 000 
<input type="text" class="js-range-slider"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="0"
       data-max="1000"
       data-from="200"
       data-to="800"
       data-prefix="$">
Copy

Fractional Values

-3.23.2-12.806.412.8 
<input type="text" class="js-range-slider"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="-12.8"
       data-max="12.8"
       data-from="-3.2"
       data-to="3.2"
       data-step="0.1">
Copy

Modal 

<!-- Button Trigger Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
   Open modal
  </button>
<!-- End Button Trigger Modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Example Title </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">× </span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" class="js-range-slider"
               data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
               data-type="double"
               data-grid="true"
               data-hide-from-to="false"
               data-min="0"
               data-max="1000"
               data-from="200"
               data-to="800">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close </button>
        <button type="button" class="btn btn-primary">Continue </button>
      </div>
    </div>
  </div>
</div>
Copy

JavaScript behavior

For a full JavaScript behavior, see the official documentation: Settings .

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-type="".

Attribute Description

data-result-min

 If data-type="" is set to single, then the block ID to which the current value will be transmitted. If data-type="double", then the block ID to which the value will be transmitted from the left slider.

data-result-max

 If data-type="double", then the block ID to which the value will be transmitted from the right slider.

data-result-secondary

 ID of the block to which the value will be transmitted from data-secondary-value='{"values": [1,2,3,4,5,6]}'

data-secondary-value

 An array with data for a chart, in which values are the values of the minor chart, and steps — the value of the main chart upon reaching which the corresponding value from the values will be displayed.

data-grid

 If is set to true, it turns on the slider mode with graphs.

data-foreground-target

 Graph ID in the foreground - this graph will change the width depending on the position of the sliders.