Range Slider

Ion Range Slider

Ion Range Slider is a powerful and flexible range slider plugin with many configuration options.

Step 1: Install Ion Range Slider

You can install Ion Range Slider via yarn.

yarn add ion-rangeslider

Step 2: Include CSS & script

Include the Ion Range Slider CSS and JS files in your project.

<!-- Ion Range Slider CSS -->
<link href="../assets/libs/ion-rangeslider/css/ion.rangeSlider.min.css" rel="stylesheet" type="text/css">

<!-- Ion Range Slider JS -->
<script src="../assets/libs/ion-rangeslider/js/ion.rangeSlider.min.js"></script>

Step 3: Add Input Field

Add a text input with a descriptive ID for the range slider.

<!-- Range slider -->
<input type="text" id="range-slider">

Step 4: Initialize Slider

Initialize the range slider using jQuery.

"use strict";

$(document).ready(function () {
    $("#range-slider").ionRangeSlider({
        skin: "round"
    });
});

For more options and configurations, check the Ion Range Slider documentation.