Pure JavaScript HTML5 Canvas Range Slider


CanvasSlider is a lightweight JavaScript range slider.

Most of the range slider controls use Javascript and a stylesheet.

This slider uses a HTML5 canvas element to draw a slider without the need of a stylesheet.

It is easy to maintain and gives a lot of flexibility.


  • Pure Javascript, no dependencies required.
  • No dedicated stylesheet needed.
  • All modern browsers are supported.
  • Multiple handles: one, two or more handles.
  • Change the slider value by dragging the handle or clicking on the track.
  • Create a snapshot image of the slider.
  • The ability of the handle to either snap to tick values or to be positioned at any point along the slider.
  • Auto-generate a range of evenly spaced discrete values.
  • Simple number formatting.
  • Multiple handler shapes.
  • User defined color schemes.


You can try and see a demo application on the included web page.




Documentation can be found on the web page included in this project.

Download Details:

Author: akalverboer

Source Code: https://github.com/akalverboer/CanvasSlider

#javascript #html5

Pure JavaScript HTML5 Canvas Range Slider
16.05 GEEK