jQuery UI contains several plugins, one of which is a slider. A slider can be used to replace a text box to capture a number or other item from a finite list of items. A slider can also be a replacement for a selectbox. Typically, you would choose a slider when interactivity is required, such as a color picker.
Here are two examples of using the
jQuery slider plugin:
Uses jQuery 1.4.2 and jQuery UI 1.8
1
2
3
4
5
6
7
8
9
10
11
12
|
// form to save slider values <form method="post" action="page.php">
// wrapper <div style="width:300px;">
// title <label for="slider_tacos">How many tacos</label>
// dynamic results of slider <div id="slider_tacos_text"></div>
// <br/>
// slider container <div id="slider_tacos"></div>
// <p/>
// initial and current min <input type="hidden" name="hid_tacos_min" id="hid_tacos_min" value="2">
// initial and current max <input type="hidden" name="hid_tacos_max" id="hid_tacos_max" value="70">
// </div>
// yes, you probably will need <button type="submit" value="tacos">Tacos!</button>
// </form>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
$(document).ready( function() {
// initiate the slider
$('#slider_tacos').slider({
range: true, // true two handles; false one handle
min: 0, // min value
max: 90, // max value
animate: true, // on handle stop; 'slow', 'normal[, 'fast', or # ms or false, true
orientation: 'horizontal', // 'horizontal', 'vertical'
step: 1, // increments
values: [$('#hid_tacos_min').val(), $('#hid_tacos_max').val()], // default values
start: function(event, ui) { // start
},
slide: function(event, ui) { // mouse movement
},
stop: function(event, ui) { // stop
},
change: function(event, ui) { // value change by mouse, keyboard or javascript
// ui.values is an array with the value of each handle
// ui.value is the current value for the handle being moved
var min = ui.values[0];
var max = ui.values[1];
// change the steps based on current value
if (ui.value > 50) {
$(this).slider('option', 'step', 10);
} else if (ui.value > 20) {
$(this).slider('option', 'step', 5);
} else {
$(this).slider('option', 'step', 1);
}
// update form fields
$('#hid_tacos_min').val(min);
$('#hid_tacos_max').val(max);
// give feedback to the user
if (min == max) {
$('#slider_tacos_text').html('Equal to '+min);
} else {
$('#slider_tacos_text').html('Between '+min+' and '+max);
}
}
});
// instead of duplicating text logic in html/php,
// trigger the change method so user feedback (range text) displayed
$('#slider_tacos').slider('values', [2,70]);
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// form to save color <form method="post" action="page.php">
// wrapper <div style="width:300px;">
// title <label for="slider_color">Choose a color</label>
// choosen color <div id="slider_color_result"></div>
// red hex value <div id="slider_color_r_text" class="slider_color_text">00</div>
// green hex value <div id="slider_color_g_text" class="slider_color_text">00</div>
// blue hex value <div id="slider_color_b_text" class="slider_color_text">00</div>
// <br/><br/>
// red slider <div id="slider_color_r" class="slider_color">R</div>
// green slider <div id="slider_color_g" class="slider_color">G</div>
// blue slider <div id="slider_color_b" class="slider_color">B</div>
// <p/>
// red form field <input type="hidden" name="hid_color_r" id="hid_color_r" value="0">
// green form field <input type="hidden" name="hid_color_g" id="hid_color_g" value="0">
// blue form field <input type="hidden" name="hid_color_b" id="hid_color_b" value="0">
// </div>
// </form>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
$(document).ready( function() {
// initiate the sliders
$('div.slider_color').slider({
min: 0, // min value
max: 255, // max value
animate: true, // on handle stop; 'slow', 'normal[, 'fast', or # ms or false, true
orientation: 'vertical', // 'horizontal', 'vertical'
value: 0, // default value
change: function(event, ui) { // value change by mouse, keyboard or javascript
// ui.value is the current value for the handle being moved
// current slider
var slider_id = $(this).attr('id');
// update form field
$('#'+slider_id).val(ui.value);
// give feedback to the user
$('#'+slider_id+'_text').html(toHex(ui.value));
// update the color block
update_color_result();
}
});
// show the initial color
update_color_result();
});
function update_color_result() {
var hex_r = toHex($('#slider_color_r').slider('value'));
var hex_g = toHex($('#slider_color_g').slider('value'));
var hex_b = toHex($('#slider_color_b').slider('value'));
$('#slider_color_result').css({'background-color':'#'+hex_r+hex_g+hex_b});
}
// helper function from
// http://www.linuxtopia.org/online_books/javascript_guides/javascript_faq/rgbtohex.htm
function toHex(N) {
if (N==null) return '00';
N=parseInt(N); if (N==0 || isNaN(N)) return '00';
N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
return '0123456789ABCDEF'.charAt((N-N%16)/16) + '0123456789ABCDEF'.charAt(N%16);
}
|
