HTML5 Canvas Range Slider With JavaScript – CanvasSlider

Preview:

Description:

CanvasSlider is a dependency-free JavaScript library to render a modern, customizable, feature-rich range slider using HTML5 canvas.

Key Features:

• Number formatting.
• Supports multiple drag handles.
• Custom handle shapes.
• Optional ticks, labels, tooltips, and value boxes.
• No CSS required.

How to use it:

1. Download the package and place the JavaScript canvasslider.js at the bottom of the page.

<script src="canvasslider.js"></script>

2. Create an HTML5 canvas element on which you want to render a range slider.

<canvas id="mySlider" title="My Slider"></canvas>

3. Initialize the range slider and done.

var mySlider = new CanvasSlider({
     canvas: "mySlider",
     range: {min: 0, max: 80.4, count: 5},
     start: [40.6],
     snapToTicks: true,
     showLabels: true,
     showMajorTicks: true,
     showMinorTicks: false,
     showToolTip: true,
     showValueBox: false,
     format: {decimals: 0, prefix: "€ ", suffix: ""},
     handle: {shape: "ellipse", w: 20, h: 20, hue: 240},
     baseColor: {h: 207, s: 60, v: 100}
});

4. All possible configs:

• Configuration properties are used if a new instance of the slider is initiated. The canvas option is required, all other options are optional.
• Set the width and height of the slider in the html code of the canvas if you do not want a default.
• The slider is automatically scaled in the width and adjusts to the width of the canvas.
• Depending on the options you choose, the preferred height of the canvas varies between 45px and 80px.

5. Possible API methods. Methods can be used after a new instance is initiated. E.g. var a = slider.getValue(2);

Changelog:

09/25/2020

• Update canvasslider.js

08/11/2020

• JS Update