Skip to content

Commit dae9a6b

Browse files
chichengchicheng
committed
Slider: #4385
1 parent df5139b commit dae9a6b

1 file changed

Lines changed: 49 additions & 0 deletions

File tree

‎tests/visual/slider/slider_range_4385.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>jQuery UI Slider - Range slider</title>
5+
<link type="text/css" href="../../../themes/base/ui.all.css" rel="stylesheet" />
6+
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
7+
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
8+
<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
9+
<link type="text/css" href="../../../demos/demos.css" rel="stylesheet" />
10+
<style type="text/css">
11+
#demo-frame > div.demo { padding: 10px !important; };
12+
</style>
13+
<script type="text/javascript">
14+
$(function() {
15+
$("#slider-range").slider({
16+
range: true,
17+
min: 0,
18+
max: 500,
19+
values: [75, 300],
20+
slide: function(event, ui) {
21+
$("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
22+
return ((ui.values[1] - ui.values[0]) > 50);
23+
}
24+
});
25+
$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
26+
});
27+
</script>
28+
</head>
29+
<body>
30+
31+
<div class="demo">
32+
33+
<p>
34+
<label for="amount">Price range:</label>
35+
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
36+
</p>
37+
38+
<div id="slider-range"></div>
39+
40+
</div><!-- End demo -->
41+
42+
<div class="demo-description">
43+
44+
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
45+
46+
</div><!-- End demo-description -->
47+
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)