Range Slider

It is an easy and responsive range slider.

Ion RangeSlider.js documentation

How to use?

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

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

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

<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
Copy

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

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

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

<script>
  $(document).on('ready', function () {
    // initialization of ion range slider
    $('.js-ion-range-slider').each(function () {
      $.HSCore.components.HSIonRangeSlider.init($(this));
    });
  });
</script>
Copy

Examples

Basic parameters

Start without parameters

<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "extra_classes": "range-slider"
       }'>
<!-- End Range Slider -->
Copy

Set min value, max value and start point

500 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
   data-hs-ion-range-slider-options='{
     "extra_classes": "range-slider range-slider-indicator",
     "hide_from_to": false,
     "min": 100,
     "max": 1000,
     "from": 500
   }'>
<!-- End Range Slider -->
Copy

Set type to double and specify range, also showing grid and adding prefix "$"

$25$4750125250375500 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "extra_classes": "range-slider range-slider-indicator range-slider-grid",
         "type": "double",
         "grid": true,
         "hide_from_to": false,
         "prefix": "$",
         "min": 0,
         "max": 500,
         "from": 25,
         "to": 475
       }'>
<!-- End Range Slider -->
Copy

Set up range and step

Set up range with negative values

-500500-1 00005001 000 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
   data-hs-ion-range-slider-options='{
     "extra_classes": "range-slider range-slider-indicator range-slider-grid",
     "type": "double",
     "grid": true,
     "hide_from_to": false,
     "min": -1000,
     "max": 1000,
     "from": -500,
     "to": 500
   }'>
<!-- End Range Slider -->
Copy

Using step 250

-500500-1 00005001 000 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
   data-hs-ion-range-slider-options='{
     "extra_classes": "range-slider range-slider-indicator range-slider-grid",
     "type": "double",
     "grid": true,
     "hide_from_to": false,
     "min": -1000,
     "max": 1000,
     "from": -500,
     "to": 500,
     "step": 250
   }'>
<!-- End Range Slider -->
Copy

Set up range with fractional values, using fractional step

-3.23.2-12.806.412.8 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
   data-hs-ion-range-slider-options='{
     "extra_classes": "range-slider range-slider-indicator range-slider-grid",
     "type": "double",
     "grid": true,
     "hide_from_to": false,
     "min": -12.8,
     "max": 12.8,
     "from": -3.2,
     "to": 3.2,
     "step": 0.1
   }'>
<!-- End Range Slider -->
Copy

Select required amount

Set up range with a single range result

Result: 250 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "extra_classes": "range-slider",
         "min": 0,
         "max": 1000,
         "from": 250,
         "to": 750,
         "result_min_target_el": "#rangeSliderExample1MinResult"
       }'>
<div class="mt-4">
  <span class="text-muted">Result:</span>
  <span id="rangeSliderExample1MinResult" class="text-primary"></span>
</div>
<!-- End Range Slider -->
Copy

Set up range with a single (editable) result

$25005001 000
Select required amount 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
   data-hs-ion-range-slider-options='{
     "extra_classes": "range-slider range-slider-indicator range-slider-grid",
     "grid": true,
     "hide_from_to": false,
     "prefix": "$",
     "min": 0,
     "max": 1000,
     "from": 250,
     "to": 750,
     "result_min_target_el": "#rangeSliderExample2MinResult"
   }'>

<div class="d-flex justify-content-between align-items-center mt-4">
  <span class="text-muted">Select required amount</span>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="fas fa-dollar-sign"></i>
      </span>
    </div>
    <input type="text" class="form-control max-w-9rem" id="rangeSliderExample2MinResult">
  </div>
</div>
<!-- End Range Slider -->
Copy

Set up range with double range results

$25$4750125250375500 
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "extra_classes": "range-slider range-slider-indicator range-slider-grid",
         "type": "double",
         "grid": true,
         "hide_from_to": false,
         "prefix": "$",
         "min": 0,
         "max": 500,
         "from": 25,
         "to": 475,
         "result_min_target_el": "#rangeSliderExample3MinResult",
         "result_max_target_el": "#rangeSliderExample3MaxResult"
       }'>
<div class="d-flex justify-content-between mt-4">
  <input type="text" class="form-control max-w-9rem" id="rangeSliderExample3MinResult">
  <input type="text" class="form-control max-w-9rem mt-0" id="rangeSliderExample3MaxResult">
</div>
<!-- End Range Slider -->
Copy

Range with Bar charts

Set up range with bar chart.

Min price: 500 
<!-- Bar Chart -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="position-absolute w-100 overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "bar",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                    "backgroundColor": "#377dff",
                    "borderColor": "#377dff"
                  }]
                },
                "options": {
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      },
                      "ticks": {
                        "beginAtZero": true
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  }
                }
              }'></canvas>
    </div>
  </div>

  <div id="foregroundBarChartSingleResult" class="position-absolute w-100 overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "bar",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                    "backgroundColor": "#e7eaf3",
                    "borderColor": "#e7eaf3"
                  }]
                },
                "options": {
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      },
                      "ticks": {
                        "beginAtZero": true
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  }
                }
              }'></canvas>
    </div>
  </div>
</div>
<!-- End Bar Chart -->

<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "extra_classes": "range-slider",
         "min": 0,
         "max": 1000,
         "from": 500,
         "result_min_target_el": "#rangeSliderExample4MinResult",
         "foreground_target_el": "#foregroundBarChartSingleResult"
       }'>

<div class="mt-4">
  <span class="text-muted">Min price:</span>
  <span id="rangeSliderExample4MinResult" class="text-muted"></span>
</div>
<!-- End Range Slider -->
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chart.js/dist/Chart.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js.extensions/chartjs-extensions.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.chartjs.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartjs
    $('.js-chart').each(function () {
      var chart = $.HSCore.components.HSChartJS.init($(this));
    });
  });
</script>
Copy

Set up range with double bar chart results

Min price: 250
Max price: 750 
<!-- Bar Chart -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="position-absolute w-100 overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "bar",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                    "backgroundColor": "#e7eaf3",
                    "borderColor": "#e7eaf3"
                  }]
                },
                "options": {
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      },
                      "ticks": {
                        "beginAtZero": true
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  }
                }
              }'></canvas>
    </div>
  </div>

  <div id="foregroundBarChartDoubleResult" class="position-absolute overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "bar",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                    "backgroundColor": "#377dff",
                    "borderColor": "#377dff"
                  }]
                },
                "options": {
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      },
                      "ticks": {
                        "beginAtZero": true
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  }
                }
              }'></canvas>
    </div>
  </div>
</div>
<!-- End Bar Chart -->

<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "type": "double",
         "extra_classes": "range-slider",
         "min": 0,
         "max": 1000,
         "from": 250,
         "to": 750,
         "result_min_target_el": "#rangeSliderExampleDouble4MinResult",
         "result_max_target_el": "#rangeSliderExampleDouble4MaxResult",
         "foreground_target_el": "#foregroundBarChartDoubleResult"
       }'>

<div class="d-flex justify-content-between align-items-center mt-4">
  <div>
    <span class="text-muted">Min price:</span>
    <span id="rangeSliderExampleDouble4MinResult" class="text-muted"></span>
  </div>
  <div>
    <span class="text-muted">Max price:</span>
    <span id="rangeSliderExampleDouble4MaxResult" class="text-muted"></span>
  </div>
</div>
<!-- End Range Slider -->
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chart.js/dist/Chart.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js.extensions/chartjs-extensions.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.chartjs.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartjs
    $('.js-chart').each(function () {
      var chart = $.HSCore.components.HSChartJS.init($(this));
    });
  });
</script>
Copy

Range with Area charts

Set up range with area chart.

Min price: 500 
<!-- Area Chart -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="position-absolute w-100 overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "line",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                    "backgroundColor": "#377dff",
                    "borderColor": "#377dff"
                  }]
                },
                "options": {
                  "layout": {
                    "padding": {
                      "top": 1.5
                    }
                  },
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  },
                  "elements": {
                    "point": {
                      "radius": 0
                    }
                  }
                }
              }'></canvas>
    </div>
  </div>

  <div id="foregroundAreaChartSingleResult" class="position-absolute w-100 overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "line",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                    "backgroundColor": "#e7eaf3",
                    "borderColor": "#e7eaf3"
                  }]
                },
                "options": {
                  "layout": {
                    "padding": {
                      "top": 1.5
                    }
                  },
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      },
                      "ticks": {
                        "beginAtZero": true
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  },
                  "elements": {
                    "point": {
                      "radius": 0
                    }
                  }
                }
              }'></canvas>
    </div>
  </div>
</div>
<!-- End Area Chart -->

<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "extra_classes": "range-slider",
         "min": 0,
         "max": 1000,
         "from": 500,
         "result_min_target_el": "#rangeSliderExample5MinResult",
         "foreground_target_el": "#foregroundAreaChartSingleResult"
       }'>

<div class="mt-4">
  <span class="text-muted">Min price:</span>
  <span id="rangeSliderExample5MinResult" class="text-muted"></span>
</div>
<!-- End Range Slider -->
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chart.js/dist/Chart.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js.extensions/chartjs-extensions.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.chartjs.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartjs
    $('.js-chart').each(function () {
      var chart = $.HSCore.components.HSChartJS.init($(this));
    });
  });
</script>
Copy

Set up range with double area chart results

Min price: 250
Max price: 750 
<!-- Area Chart -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="position-absolute w-100 overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "line",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                    "backgroundColor": "#e7eaf3",
                    "borderColor": "#e7eaf3"
                  }]
                },
                "options": {
                  "layout": {
                    "padding": {
                      "top": 1.5
                    }
                  },
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      },
                      "ticks": {
                        "beginAtZero": true
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  },
                  "elements": {
                    "point": {
                      "radius": 0
                    }
                  }
                }
              }'></canvas>
    </div>
  </div>

  <div id="foregroundAreaChartDoubleResult" class="position-absolute overflow-hidden">
    <div style="height: 100px;">
      <canvas class="js-chart"
              data-chartjs-options='{
                "type": "line",
                "data": {
                  "labels": ["", "", "", "", "", "", "", "", ""],
                  "datasets": [{
                    "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                    "backgroundColor": "#377dff",
                    "borderColor": "#377dff"
                  }]
                },
                "options": {
                  "layout": {
                    "padding": {
                      "top": 1.5
                    }
                  },
                  "scales": {
                    "yAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      },
                      "ticks": {
                        "beginAtZero": true
                      }
                    }],
                    "xAxes": [{
                      "display": false,
                      "gridLines": {
                        "display": false,
                        "drawBorder": false
                      }
                    }]
                  },
                  "tooltips": {
                    "custom": false
                  },
                  "elements": {
                    "point": {
                      "radius": 0
                    }
                  }
                }
              }'></canvas>
    </div>
  </div>
</div>
<!-- End Area Chart -->

<!-- Range Slider -->
<input class="js-ion-range-slider" type="text"
       data-hs-ion-range-slider-options='{
         "type": "double",
         "extra_classes": "range-slider",
         "min": 0,
         "max": 1000,
         "from": 250,
         "to": 750,
         "result_min_target_el": "#rangeSliderExampleDouble5MinResult",
         "result_max_target_el": "#rangeSliderExampleDouble5MaxResult",
         "foreground_target_el": "#foregroundAreaChartDoubleResult"
       }'>

<div class="d-flex justify-content-between align-items-center mt-4">
  <div>
    <span class="text-muted">Min price:</span>
    <span id="rangeSliderExampleDouble5MinResult" class="text-muted"></span>
  </div>
  <div>
    <span class="text-muted">Max price:</span>
    <span id="rangeSliderExampleDouble5MaxResult" class="text-muted"></span>
  </div>
</div>
<!-- End Range Slider -->
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chart.js/dist/Chart.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js.extensions/chartjs-extensions.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.chartjs.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartjs
    $('.js-chart').each(function () {
      var chart = $.HSCore.components.HSChartJS.init($(this));
    });
  });
</script>
Copy

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/range-slider/

JavaScript behavior

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

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of range slider
    $.HSCore.components.HSIonRangeSlider.init($(this), {
      onFinish: function () {
        console.log('Finished!!!');
      }
    });
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-ion-range-slider-options='{
   ...

   // Custom
   "foreground_target_el": null,
   "secondary_target_el": "tooltip",
   "secondary_val": {
     "steps": null,
     "values": null
   },
   "result_min_target_el": null,
   "result_max_target_el": null
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-ion-range-slider-options='{}'. For more detailed or missing attributes/functions, see the official Ion RangeSlider.js documentation page.

Parameters Description Default value

type

 Choose slider type, could be single - for one handle, or double for two handles 'single'

hide_min_max

 Hides min and max labels true

hide_from_to

 Hide from and to labels true

foreground_target_el

 Chart ID in the foreground, this chart will change the width depending on the position of the sliders null

secondary_target_el

 ID of the block to which the value from secondary_val.values will be transferred null

secondary_val.steps

 the value of the main chart upon reaching which the corresponding value from secondary_val.values will be displayed null

secondary_val.values

 background graph values null

result_min_target_el

 If type is single, then the ID of the block to which the current value will be transmitted. If type is set to double, then the ID of the block to which the value will be transferred from the left slider null

result_max_target_el

 If type is in the value double, then the ID of the block to which the value from the right slider will be transferred null