Author: | SirSaleh |
---|---|
Views Total: | 113 views |
Official Page: | Go to website |
Last Update: | July 2, 2023 |
License: | MIT |
Preview:

Description:
A creative JavaScript custom range input library that helps generates customizable range sliders shaped by mathematical functions, including sine, cosine, and more.
The non-linear scales provided by Range Rider give users a more intuitive way to select values, compared to a standard linear slider input. The shaped sliders also provide a visually pleasing design alternative to basic range inputs.
How to use it:
1. Download and import the range_rider.js library.
<script src="/range_rider.js"></script>
2. Create a container to hold the range slider.
<div id="example"></div>
3. Initialize the Range Rider and define the shape function as follows:
const example = new RangeRider({ holderID: "example", shapeFunc: (x) => { return Math.sin(x) }, funcStart: 0, funcEnd: Math.PI*10, sliderChangeCallback: function(newPercentageValue){ // get the value console.log(newPercentageValue) } }); // generate example.generate()
4. Customize the appearance of the range slider.
const example = new RangeRider({ holderID: "example", shapeFunc: (x) => { return Math.sin(x) }, funcStart: 0, funcEnd: Math.PI*10, sliderChangeCallback: function(newPercentageValue){ // get the value console.log(newPercentageValue) }, strokeWidth: 10, strokeColor: "#000000", percentageValue: 50, progressStrokeWidth: 10, progressStrokeColor: "#ff5555", });