Smooth Custom Range Slider Control With Pure JavaScript – rangeslide.js

rangeslide.js is a lightweight yet robust JavaScript plugin that helps you render smooth, dynamic range sliders with custom labels, ticks and thumbs.

How to use it:

Load the following JavaScript and CSS files in your html file.

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

Define your own 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." }
];

Create a placeholder element for your range slider.

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

Render a default range slider inside the DIV element.

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

All possible options to customize the range 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"
});

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
      
    }
});