質問編集履歴
1
現在のソースコードを追加しました。最初は500の幅で動かし、途中から1000単位でつまみを動かしたいです。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -31,4 +31,54 @@
|
|
|
31
31
|
例えば、
|
|
32
32
|
step:50,にすると、
|
|
33
33
|
0→50→100→150のような動きになってしまいます。
|
|
34
|
-
そもそも途中で値を変更させる場合stepは使わないのでしょうか？
|
|
34
|
+
そもそも途中で値を変更させる場合stepは使わないのでしょうか？
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
### 現在のソースコード
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
<html lang="en">
|
|
41
|
+
|
|
42
|
+
<head>
|
|
43
|
+
<meta charset="utf-8">
|
|
44
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
45
|
+
<title>jQuery UI Slider - Range slider</title>
|
|
46
|
+
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
47
|
+
<link rel="stylesheet" href="/resources/demos/style.css">
|
|
48
|
+
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
|
49
|
+
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<script type="text/javascript">
|
|
53
|
+
jQuery(function() {
|
|
54
|
+
jQuery('#PriceRangeslider').slider({
|
|
55
|
+
min: 0,
|
|
56
|
+
max: 100000,
|
|
57
|
+
step: 500,
|
|
58
|
+
range: true,
|
|
59
|
+
values: [0, 100000],
|
|
60
|
+
slide: function(e, ui) {
|
|
61
|
+
jQuery('#PriceMin').val(ui.values[0]);
|
|
62
|
+
jQuery('#PriceMax').val(ui.values[1]);
|
|
63
|
+
},
|
|
64
|
+
change: function(e, ui) {
|
|
65
|
+
jQuery('#PriceMin').val(ui.values[0]);
|
|
66
|
+
jQuery('#PriceMax').val(ui.values[1]);
|
|
67
|
+
},
|
|
68
|
+
create: function(e, ui) {
|
|
69
|
+
var values = jQuery(this).slider('option', 'values')
|
|
70
|
+
jQuery('#PriceMin').val(values[0]);
|
|
71
|
+
jQuery('#PriceMax').val(values[1]);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
</script>
|
|
76
|
+
<form action="" method="" name="">
|
|
77
|
+
<input id="PriceMin" class="min_price_" type="text" />〜
|
|
78
|
+
<input id="PriceMax" class="max_price_" type="text" />
|
|
79
|
+
<div id="PriceRangeslider" class="range_slider_" style="width:180px;"></div>
|
|
80
|
+
</form>
|
|
81
|
+
</body>
|
|
82
|
+
|
|
83
|
+
</html>
|
|
84
|
+
```
|