Custom Range Input In Math Function Shapes – Range Rider

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