Getting Started With jQuery UI
Getting Started With jQuery UI
Written by Ian Elliot   
Monday, 28 January 2013
Article Index
Getting Started With jQuery UI
Doing more with the Slider

justjquery

Slider Settings

This gives you the basic operation of a slider - what else can you change?

You can set the max and min values that the slider will return via the max and min properties. You can also set the step size, i.e the amount the slider moves each time using the step property. Finally you can set the orientation using the orientation property.

So, for example, to set up a vertical slider working between 1 and -1 with a step size of 0.1 and a display of the value as the user moves the slider.

The HTML can be as simple as:

<div id="mySliderDiv">
<br/>
<div id="myText">

 The code is:

$("#mySliderDiv").height(400).width(20);
$("#mySliderDiv").slider({
       max:1, min:-1,
       step:0.1,
       orientation:"vertical",
       slide: function(event, ui) {
               $("#myText").text(ui.value);
              }
});

If you run this then you will see a vertical slider with the current value changing below it as the user moves the slider.

 

verticalslider

Range Slider

As well as the standard slider you can also implement a range slider - one that has two sliders, allowing the user to setup a max and min for a range.

All you have to do is set the range property to true and then set values to an array giving the max and min properties of the two sliders.

For example

$("#mySliderDiv").slider({
         range:true,
         values:[25,75],
         max:100,min:0});

creates a slider with two slides ranging between 0 and 100 and one initially set to 25 and the other to 75. You can also have a slider with a fixed max or min by setting the range to "max" or "min"

You can get the values for the sliders using the  values() or value(index) methods. For example

var values=$("#mySliderDiv").slider("values);

returns an array of values.

Changing the Style

You might not be happy with the default style of the slider. To change it all you have is create a new style sheet that applies styles to the standard classes set up by the constructor.

You can find out the classes that are used by examining the slider element using Firebug say:

<div id="mySliderDiv"
  class="ui-slider
         ui-slider-horizontal
         ui-widget
         ui-widget-content
         ui-corner-all"
         aria-disabled="false">
 <a class="ui-slider-handle
           ui-state-default
           ui-corner-all" href="#">
 </a>
</div>

From this you can see that to customize the slider handle you need to modify the ui-slider-handle, the ui-state-default or the  ui-corner-all class. The problem is always finding out which one to change.

You can create complete themed sets of styles using the ThemeRoller where you will also find predefined styles you can use.

If you want to do something radical to the slider handle then the best approach is to just jQuery to remove the assigned styles and apply your own.

  

jquerycover

Chapter List 

  1. The DOM
  2. CSS Selectors
  3. Filters
  4. Advanced Filters
  5. Manipulating The DOM
  6. Promises & Deferred
  7. Promises, Deferred & WebWorkers
  8. Ajax the Basics - get
  9. Ajax - post
  10. Ajax - Advanced, character set, MIME and caching
  11. jQuery - Easy Plugins
  12. jQuery UI
  13. jQuery UI Custom Control - Widget Factory
  14. Getting Started With QUnit Testing

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

 

blog comments powered by Disqus

 

Banner


Getting Started With jQuery - Ajax The Basics

Ajax is the technology that turned the web page into the web app. Since Ajax was invented there have been lots of innovations and frameworks that make web apps easier but a mastery of basic Ajax techn [ ... ]



Just JavaScript - Life Without Type - Duck Testing And Prototype Construction

Attempts to impose type on JavaScript just don't seem to work unless you turn JavaScript into a completely different language. We have already embarked on a consideration of how to live without t [ ... ]


Other Articles
  



Last Updated ( Tuesday, 25 August 2015 )
 
 

   
Copyright © 2015 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.