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

Donation

Try 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

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

Requirements

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:

jQuery
jQueryUI (with slider and button wigits)
SliderAccess

Version

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

Options

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

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

Examples

Add sliderAccess to a basic slider.

$('#basic_example_1').slider().sliderAccess({
	touchonly : false
});

Change the position of sliderAccess.

$('#basic_example_2').slider({
	min: 0,
	max: 100,
	value: 50,
	step: 10 // sliderAccess will inherit this
}).sliderAccess({
	touchonly : false,
	where: 'before'
});

Use text for the buttons

$('#basic_example_3').slider().sliderAccess({
	touchonly : false,
	text: true,
	upText: 'More',
	downText: 'Less'
});