Add Touch Accessibility to jQueryUI Slider

The jQueryUI Slider wigit can be difficult to use on touch devices. It makes it much easier if there is a button to press which adjusts the slider. jQueryUI SliderAccess easily adds this functionality.

If you are interested in contributing to SliderAccess please check it out on GitHub. If you do make additions please keep in mind I enjoy tabs over spaces,.. But contributions are welcome in any form.

Back to Blog or Follow on Twitter


Car BounceTry my new app to keep you informed of your car's financing status and value.

Has this SliderAccess Addon been helpful to you?

Getting Started

Highly Recommended

Subscribe to my blog via email and follow @PracticalWeb on Twitter. I post for nearly every new version, so you know about updates.


Download/Contribute on GitHub (Need the entire repo? Find a bug? See if its fixed here)


You also need to include jQuery and jQuery UI with datepicker and slider wigits. You should include them in your page in the following order:

  1. jQuery
  2. jQueryUI (with slider and button wigits)
  3. SliderAccess


Version 0.2

Last updated on 09/22/2012

jQuery UI Slider Access is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly.

GPL License

MIT License


SliderAccess has several options to customize it's appearance and functionality:

Default: true - To show sliderAccess only on touch devices
Default: "after" - Where to place the buttons. "after" or "before"
Default: inherits from slider - How many units each button press increments/decrements.
Default: "ui-icon-plus" - jQueryUI theme class representing the icon to use for increment.
Default: "ui-icon-minus" - jQueryUI theme class representing the icon to use for decrement.
Default: false - Whether to show button text.
Default: "+" - Text to show in the increment button.
Default: "-" - Text to show in the decrement button.
Default: true - Whether to use the jQueryUI Buttonset.
Default: "span" - Tagname used to generate a buttonset.
Default: "150" - When press and hold a button, how fast it fires change.
Default: false - When true will negate the increment values and positioning.


Add sliderAccess to a basic slider.

	touchonly : false

Change the position of sliderAccess.

	min: 0,
	max: 100,
	value: 50,
	step: 10 // sliderAccess will inherit this
	touchonly : false,
	where: 'before'

Use text for the buttons

	touchonly : false,
	text: true,
	upText: 'More',
	downText: 'Less'