jQuery slider with 4 online examples

Sliders in jQuery

The sliders are quite common these days in different types of websites. From an e-commerce site to specify the range of price to search products, in financial websites to select income or loan ranges to web developers or designers to select color combination or audio sites using equalizers etc. sliders are quite visible and liked by users. It also enhances user experience where you can replace traditional text/select boxes by beautiful and easy to use sliders.

jQuery UI plugin makes it quite easier to design and use sliders in your website. By using jQuery slider plugin, most of the complex work is already done. As a designer or developer of the website you simply need to include jQuery, jquery-ui library and refer the jQuery slider plugin into your web pages to use sliders in your projects.

In this tutorial, you will see how to use jQuery slider with the different type of examples. You can click on demo and code link to get free code that you can simply copy into your web pages and easily amend as per website theme.

A simple slider example

At its simplest, you can create a slider by using the slider jQuery plugin in your web page. In the following example, I will show you how you can create a basic slider by using a few lines of code.

jquery slider

See online demo & code

The jQuery code for this slider:

The CSS:

 

The simple markup using a paragraph tag:

In the demo, I simply used a paragraph and used its ID in jQuery code. Also note, you have to modify slider classes in order to change the default colors to match your theme.

Multiple sliders with values

The following demo uses two jQuery UI horizontal sliders. I have styled both differently and their values are shown as sliding occurs in two paragraphs. In real time applications, this can be age, selecting maximum and minimum values etc. that you can send with forms or in AJAX calls to retrieve data on that basis.

jquery slider with 2

See online demo & code

The jQuery code:

The Markup:

 

You can see in slider jQuery example, how I assigned values to paragraph elements to let the user know. In that case, the value is increased by +1 or -1 as you move the slider right or left, respectively. See the following demo, to increase the value by 10 or as per the need of your project.

Slider in jQuery UI with step option

In this slider example, the value will be increased or decreased by 10 as you slide to the right or left. This is a single slider with a paragraph showing the current value of the slider. The slider widget has a Step option that you can use to increase or decrease the slide value by given “steps”.

jquery step slider

See online demo & code

You can see, the min, max, and step options are used in the code. Every time you slide from right to left or vice versa the value will be changed by 10, as this is what I have specified in step option. You can change it to the required level. Similarly, rather assigning a value to paragraph you can assign it to any other element, including text fields.

jQuery vertical slider

Creating a vertical slider is quite easy by using the jQuery UI plugin. You simply need to specify the orientation option which has two values, either horizontal or vertical. The default is horizontal that we have used in the above slider examples.

To create a vertical slider in jQuery, simply use orientation: vertical. In the following demo, you can see the vertical slider:

jquery vertical slider

See online demo & code

jQuery code:

Markup:

You can change the color as per your theme and also get the value to perform some action based on user selection. Just like last horizontal example, as you slide the step value is kept ten i.e. value increments or decrease by 10.