• Choose a category
• All
• Classic-Fiction

chapter_07/13_sliders/script.js (excerpt)

var max = $('#max').val();

var min = $('#min').val();

var rangeSlider = $('

.slider({

min: 0,

max: 100,

step: 10,

values: [min, max],

range: true,

animate: true,

slide: function(e,ui) {

$('#min')

.val(ui.values[0]);

$('#max')

.val(ui.values[1]);

showCelebs();

}

})

.before('

Drag the slider to filter by price:

$('#price-range').after(rangeSlider).hide();

Whoa! That’s a lot of options. Let’s see if we can break them down: min and max are the minimum and maximum values of the slider, respectively. step is the amount by which the slider increments. values is used for specifying the default value of the slider. Because we’ve specified an array of two values, the slider bar will have two handles, each with a separate value. Here we’re using the values from the select lists that we grabbed earlier, so that the slider will always match up with the data in those boxes.

range and animate are helpful options when creating a slider with more than one handle, as we’re doing here: range indicates that the area between the handles should be styled differently, usually with a shadow or a different color. This option can also be set to min (in which case the area between the minimum and the first handle will be shaded) or max (which will shade the area between the last handle and the maximum). animate simply tells jQuery to animate the handle’s position smoothly if the user clicks elsewhere on the bar, rather than simply jumping there.

Finally, slide allows you to specify an event handler that will run whenever the user moves the handles on the slider. The event handler can accept an optional ui parameter that allows you to access some of the slider’s properties; here we’re using the values property to adjust the values of our select boxes. We also call showCelebs, a custom method in which we’ll show or hide celebrities, depending on whether their prices fall within the chosen range.

It’s also possible to capture the change event, which is very similar to the slide event, except that it will also fire if the slider’s values are modified programmatically (slide only fires when the user interacts directly with the slider).

The jQuery UI slider component will create a horizontal slider by default—but if you want a vertical one you can specify orientation: 'vertical'.

We’ve used before and after to add a title to our slider and affix it to the page, and we’ve also hidden the original select boxes. Try this now, and you’ll see a nicely themed slider that you can play with, and which will adjust the values of the select boxes.

In order to make it filter the celebrities, we simply need to implement the showCelebs method:

chapter_07/13_sliders/script.js (excerpt)

function showCelebs() {

var min = $('#min').val();

var max = $('#max').val();

$('.data tr').each(function() {

var price = parseInt($(this).find('td:last').text().

↵substring(1));

if (price >= min && price <= max) {

$(this).fadeIn();

} else {

$(this).fadeOut();

}

});

}

We extract the values of the select boxes, then cycle through each row in the celebrities table, and hide or show it depending on whether or not the price is within the selected range. The only tricky part here is a bit of JavaScript string processing, required to extract the price from the row text; we use substring(1) to extract everything from the first character on (which will conveniently strip the prices of their dollar signs). Then we use parseInt to turn the string into a number.

We’ll also call showCelebs on document-ready, so that the list is prefiltered based on the default values in the form.

This works entirely as expected, and allows users to easily and visually filter celebrities based on their desired price range. Sliders are a great UI widget precisely because they’re so intuitive: users will know how to use them without being told. You can probably come up with a few other controls that could benefit from being sliderized!

Drag and Drop