JQuery’s UI can add so much to a web page. There are many different widgets that the UI provides. One up and coming star, is the slider. In this tutorial, we will learn how to use a slider to control the text size of an article on a page. This lets the user control exactly the size that suits them, and is also a pretty impressive feature to have on a site!

jQuery slider

Behavior:

  • When the slider is dragged, a bubble will fade in, telling the current size.
  • The text “current text size” will also appear with the current text size next to it.
  • Make the text increase one px or decrease one px on the click of the plus or minus sign.

Download It Here | View Demo