Very Simple Javascript Slider Control

Version 1.0

Created: November 10, 2014
Last Modified: April 1, 2019
Subscribe to Internet Tips and Tools Feed


  • Simple Javascript Slider Control
  • Completely crossbrowser javascript and html. Does not use jquery
  • Customize style with css
  • Horizontal or vertical slider
  • Options to have knob, slider, and/or buffer
  • HTML5 is not required. Works with HTML4
  • Uses mouse events (Chrome, IE, Safari, Firefox, Opera)
  • Uses touch events (iOS, iPhone, Android)


Downloaded 0 times.
Please make a donation to reveal the download link.

Select Slider Skin:

Slider CSS Style: (Put in between <style> </style> tags just before </head> or put in css file.)

Slider HTML:


4/1/2019 - Version 1.1 - Previously if the slider was contained in a fixed div then the slider knobs would be off center. This has been fixed by using getBoundingClientRect() to find the slider knobs position. Thank you to Randy for finding and notifying about the problem.

12/02/2014 - Added vertical-align: middle; to all horizontal slider CSS for better alignment.

11/21/2014 - Added display: inline-block; to all slider div's CSS so that they could easily be displayed next to text.

11/10/2014 - Version 1.0 - "Very Simple Javascript Slider Control" Created

Back to
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 0 comments.

Displaying first 50 comments.