Slider

Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.

initial value=10, min=0, max=100, onChange event triggers input box value change immediately
  2. 20%
  3. 40%
  4. 60%
  5. 80%
  1. lowest
  2. normal
  3. highest
Slider1 Value:


initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away
  1. 0
  2. 100
  2. 20
  3. 40
  4. 60
  5. 80
Slider2 Value:

Fancy HTML labels:


  1. small

  2. medium

  3. large

Standalone ruler example:

  2. 1
  3. 2