Lightweight Customizable Range Slider With labels | rangeslide.js

rangeslide.js is a feature-rich and highly customizable range slider with labels (but without jQuery).

range slider with custom steps, custom range slider css, range slider with min and max values, html range slider with 2 handles, range slider html

Smooth Vuetify Range Slider Component-Based On Vue

How to make use of it:

1. Load the following JavaScript and CSS files into your HTML file.

<link rel="stylesheet" href="rangeslide.css">
<script src="rangeslide.js"></script>

2. Define your data in a JS array for the range slider.

var myData = [
    { name: "2016", item: "This is some sample text associated with first item." },
    { name: "2017", item: "This is some sample text associated with second item." },
    { name: "2018", item: "This is some sample text associated with third item. It was returned from a function." },
    { name: "2019", item: function() { return "This is some sample text associated with fourth item. It was also returned from a function."; } },
    { name: "2020", item: "This is some sample text associated with fifth item." },
    { name: "2021", item: "This is some sample text associated with sixth item." },
    { name: "2022", item: "This is some sample text associated with the last item." }

3. Create a placeholder for your scale slider.

<div id="rangeslide-demo" class="rangeslide"></div>

4. Displays the default scope slider within a DIV element.

var myRangeSlider = rangeslide("#rangeslide-demo", {
    data: myData

5. All possible options for customizing the scale slider.

var myRangeSlider = rangeslide("#rangeslide-demo", {
    autoPlay: false,
    autoPlayDelay: 1000,
    data: [],
    enableLabelClick: true,
    enableMarkerClick: true,
    enableTrackClick: true,
    handlers: [],
    highlightSelectedLabels: false,
    labelsPosition: "below",
    labelsWidth: 60,
    leftLabel: "",
    loop: true,
    markerSize: 14,
    rightLabel: "",
    showLabels: false,
    sideLabelsWidth: 40,
    showTrackMarkersProgress: false,
    showTicks: true,
    showTrackMarkers: false,
    showTrackProgress: false,
    showValue: false,
    startAlternateLabelsFromTop: false,
    startPosition: 0,
    stepSize: 1,
    thumbHeight: 16,
    thumbWidth: 16,
    tickHeight: 16,
    trackHeight: 7,
    valueIndicatorOffset: 5,
    valueIndicatorWidth: 30,
    valueIndicatorHeight: 30,
    valuePosition: "thumb",
    valueSource: "index"

6. Event handlers.

var myRangeSlider = rangeslide("#rangeslide-demo", {
    handlers: {
      // Fires after slider value is changed 
      // Arguments: dataItem, rangeslideElement
      valueChanged: null, 
      // Fires when auto play is started dataItem, rangeslideElement
      // Arguments: dataItem, rangeslideElement
      playStart: null,
      // Fires when auto play is stopped
      // Arguments: dataItem, rangeslideElement
      playStop: null,
      // Fires when auto play loop is complete
      // Arguments: rangeslideElement
      playLoopFinished: null,
      // Fires after slider is initialized
      // Arguments: rangeslideElement
      initialized: null,
      // Fires after slider is refreshed
      // Arguments: rangeslideElement
      refreshed: null,
      // Fires after slider track is clicked 
      // Arguments: dataItem, trackElement
      trackClicked: null,
      // Fires after label is clicked  
      // Arguments: dataItem, labelElement
      labelClicked: null,
      // Fires after track marker is clicked 
      // Arguments: dataItem, markerElement
      markerClicked: null,
      // Fires when thumb dragging is initiated  
      // Arguments: dataItem, thumbElement
      thumbDragStart: null,
      // Fires when thumb is being dragged 
      // Arguments: dataItem, thumbElement
      thumbDragged: null,
      // Fires when thumb is dropped 
      // Arguments: dataItem, thumbElement
      thumbDraggedEnd: null

smooth custom range slider control, rangeslide.js Plugin/Github

See Demo And Download

Official Website(karenpommeroy): Click Here

This superior jQuery/javascript plugin is developed by karenpommeroy. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…