Author: | karenpommeroy |
---|---|
Views Total: | 4,934 views |
Official Page: | Go to website |
Last Update: | April 27, 2017 |
License: | MIT |
Preview:

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