Best jQuery Range Slider Plugins & Tutorials with Demo

Creating a Slider Control with the HTML5 Range Input and JavaScript

Creating a Slider Control with the HTML5 Range Input and JavaScript

In this tutorial we will create a basic HTML5 range input slider to resize an image, with a JavaScript function updating elements in the page as the user alters the range. At the moment, Internet Explorer and Firefox do not support the range input, but the WebKit (Safari and Chrome) and Opera browsers do.

noUiSlider : jQuery Range Slider with Demo

noUiSlider : jQuery Range Slider with Demo

noUiSlider is a little jQuery plugin that turns a html object into a nice (range) slider. It can have two handles to select a range, a fixed minimum or maximum to select a limit, or just two handles to pick some points.

Every event in the noUiSlider has an optional callback, so you can completely control any slider interaction. There is also some cool math in the read-out functions, so you can dynamically calculate any selected value. noUiSlider is developed to provide some basic slider functionality, without having to include the complete jQuery UI library.

How to Control Text Properties using jQuery and UI Slider

Today I will tell how you can use jQuery to animate and control your text. We will changing font size, font family and other properties. Where we can use this? As example to allow your users to customize view of text boxes in your website.

jQuery Expand Stacked Images Using Slider with Demo

JQuery Expand Stacked Images Using Slider

This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked I’m using jquery plugin, the rotate3Di and of course the jQuery UI slider.