Getting Started with jQuery UI
Getting Started with jQuery UI
Written by Ian Elliot   
Thursday, 23 March 2017
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"> </div>
<br/>
<div id="myText"></div>

 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").width(400).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"

rangeslider

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 the browser's dev tools:

 

<div id="mySliderDiv"
  class="ui-slider ui-corner-all ui-slider-horizontal
    ui-widget ui-widget-content">
 <span tabindex="0" class="ui-slider-handle
            ui-corner-all ui-state-default">
 </span>
</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.

There is a list of standard CSS class names in the documentation but you cannot always rely on their use, especially in third party widgets. 

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 use jQuery to remove the assigned styles and apply your own.

More jQuery UI

Now that you have seen how jQuery UI works you can explore the range of components it offers. They all work in more or less the same way as the slider with, of course, features specific to their functioning. You can use jQuery UI to create pages that have tabs or accordion sliding tabs. You can use it to implement popup dialog boxes to get data from the user.  There are also many more animation options provided by jQuery UI than just basic jQuery. There are also functions that will implement drag-and-drop on any HTML element.

To cover everything in jQuery Ui would take another book. However what you know of the slider widget and jQuery should take you a long way. In the next chapter we tackle a more advanced topic - adding a widget to jQuery UI. Your knowledge of jQuery makes it easy for you to create your own custom widgets but it is so much better to add them to jQuery UI. 

 

Now Available as a Print Book: 

 

smallcoverjQuery

You can buy it from:

USA and World     Amazon.com
Canada            Amazon.ca

UK                Amazon.co.uk
France            Amazon.fr
Germany           Amazon.de
Spain             Amazon.es
Italy             Amazon.it
India             Amazon.in
Japan             Amazon.jp

 

The Core UI

  1. Understanding jQuery (Book Only)
  2. The DOM And Selectors
  3. CSS Selectors
  4. The jQuery Object (Book Only)
  5. Filters
  6. Advanced Filters - Traversing The DOM
  7. Modifying DOM Objects
  8. Creating And Modifying The DOM
  9. jQuery Data
  10. Forms
  11. Function Queues
  12. Animation
  13. jQuery UI
  14. jQuery UI Custom Control - Widget Factory
  15. jQuery - Easy Plugins
  16. Getting Started With QUnit Testing

Now Available as a Print Book:

 

jquery2coverYou can buy it from:

USA and World   Amazon.com
Canada          Amazon.ca
UK              Amazon.co.uk
France          Amazon.fr
Germany         Amazon.de
Spain           Amazon.es
Italy           Amazon.it
India           Amazon.in
Japan          
Amazon.jp

 

 

 

Events, Async & AJAX

  1. Events, Async & Ajax (Book Only)
  2. Reinventing Events
  3. Working With Events
  4. Asynchronous Code
  5. Consuming Promises
  6. Using Promises 
  7. WebWorkers
  8. Ajax the Basics - get
  9. Ajax the Basics -  post
  10. Ajax - Advanced Ajax To The Server
  11. Ajax - Advanced Ajax To The Client
  12. Ajax - Advanced Ajax Transports And JSONP
  13. Ajax - Advanced Ajax The jsXHR Object
  14. Ajax - Advanced Ajax Character Coding And Encoding 

 

Banner


JavaScript Async - The Fetch API

There are a number of new features in JavaScript that make good use of promises and hence async and await. The Fetch API is a replacement for the XMLHttpRequest function and perhaps the jQuery Ajax fu [ ... ]



Getting Started with Node.js

By bringing JavaScript to the server, Node.js is something of a buzz in the wider JavaScript world. Here we look at the problem it solves and how to make good use of it.


Other Articles

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

 
 

 

blog comments powered by Disqus

Banner


JavaScript Async - The Fetch API

There are a number of new features in JavaScript that make good use of promises and hence async and await. The Fetch API is a replacement for the XMLHttpRequest function and perhaps the jQuery Ajax fu [ ... ]



Getting Started with Node.js

By bringing JavaScript to the server, Node.js is something of a buzz in the wider JavaScript world. Here we look at the problem it solves and how to make good use of it.


Other Articles

 

smallcoverjQuery



Last Updated ( Thursday, 23 March 2017 )
 
 

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