Lightweight Customizable Range Slider With labels

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