Tag met begin en eind range
Ik ben op zoek naar een oplossing voor een begin en einde te selecteren.
Ik zou 2 range tags kunnen nemen maar ik zou het graag in 1 element hebben. Bestaat er zoiets?
Concreet gaat het over selecteren van de gegevens binnen 2 percentages.
Standaard heb ik nu hardcoded van 25-75% maar ik zou de gebruikers willen laten kiezen.
Jan
Code (php)
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
48
49
50
51
52
53
54
55
56
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
48
49
50
51
52
53
54
55
56
<style>
#myRange {
-webkit-appearance: none;
width: 320px;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
margin-top: 8px;
}
#myRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
#myRange::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
#myRangeOutput {
font-family: "Lucida Console", Courier, monospace;
}
</style>
<form method="post" action="">
<div><label for="myRange">Bereik (<span id="myRangeOutput"></span>)</label></div>
<div>
<input type="range" min="1000" max="9000" step="100" id="myRange" name="myRange" />
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("myRangeOutput");
output.innerHTML = slider.value;
slider.oninput = function()
{
output.innerHTML = this.value;
}
</script>
</form>
#myRange {
-webkit-appearance: none;
width: 320px;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
margin-top: 8px;
}
#myRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
#myRange::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
#myRangeOutput {
font-family: "Lucida Console", Courier, monospace;
}
</style>
<form method="post" action="">
<div><label for="myRange">Bereik (<span id="myRangeOutput"></span>)</label></div>
<div>
<input type="range" min="1000" max="9000" step="100" id="myRange" name="myRange" />
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("myRangeOutput");
output.innerHTML = slider.value;
slider.oninput = function()
{
output.innerHTML = this.value;
}
</script>
</form>
En dan dit :
Ik zoek dus iets met een begin en einde dat er uitziet als 1 object/element maar met 2 waarden waarbij begin nooit meer kan zijn dan einde en einde dus ook niet minder dan begin.
Ik vind je opmaak wel tof :)
Jan
Toevoeging op 07/03/2022 08:33:46:
Ik heb op jouw basis wel al iets
Code (php)
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Duoslider</title>
<style>
#myRange1, #myRange2 {
-webkit-appearance: none;
width: 320px;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
margin-top: 8px;
z-index: 1;
position: relative;
left: 0;
top: 0;
}
#myRange1::-webkit-slider-thumb {
background: #4CAF50;
}
#myRange2::-webkit-slider-thumb {
background: red;
}
#myRange1::-webkit-slider-thumb, #myRange2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
z-index: 22;
}
#myRange1::-moz-range-thumb {
background: #4CAF50;
}
#myRange2::-moz-range-thumb {
background: red;
}
#myRange1::-moz-range-thumb, #myRange2::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
z-index: 22;
}
#myRangeOutput1, #myRangeOutput2 {
font-family: "Lucida Console", Courier, monospace;
}
.sliders {
display: grid;
}
.sliders input[type="range"] {
grid-column: 1;
grid-row: 1;
}
</style>
</head>
<body>
<form method="post" action="">
<div><label for="myRange1">Bereik van <span id="myRangeOutput1"></span> tot <span id="myRangeOutput2"></span></label></div>
<div class="sliders">
<input type="range" min="0" max="100" step="5" value="25" id="myRange1" name="myRange1" />
<input type="range" min="0" max="100" step="5" value="75" id="myRange2" name="myRange2" />
</div>
<script>
var sliderStart = document.getElementById("myRange1");
var output1 = document.getElementById("myRangeOutput1");
output1.innerHTML = sliderStart.value;
var sliderEinde = document.getElementById("myRange2");
var output2 = document.getElementById("myRangeOutput2");
output2.innerHTML = sliderEinde.value;
sliderStart.oninput = function()
{
if(this.value>95) {this.value=95;}
if(this.value>=sliderEinde.value) {
sliderEinde.value=parseInt(this.value)+5;
}
output1.innerHTML = sliderStart.value;
output2.innerHTML = sliderEinde.value;
}
sliderEinde.oninput = function()
{
if(this.value<5) {this.value=5;}
if(this.value<=sliderStart.value) {
sliderStart.value=parseInt(this.value)-5;
}
output1.innerHTML = sliderStart.value;
output2.innerHTML = sliderEinde.value;
}
</script>
</form>
</body>
</html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Duoslider</title>
<style>
#myRange1, #myRange2 {
-webkit-appearance: none;
width: 320px;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
margin-top: 8px;
z-index: 1;
position: relative;
left: 0;
top: 0;
}
#myRange1::-webkit-slider-thumb {
background: #4CAF50;
}
#myRange2::-webkit-slider-thumb {
background: red;
}
#myRange1::-webkit-slider-thumb, #myRange2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
z-index: 22;
}
#myRange1::-moz-range-thumb {
background: #4CAF50;
}
#myRange2::-moz-range-thumb {
background: red;
}
#myRange1::-moz-range-thumb, #myRange2::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
z-index: 22;
}
#myRangeOutput1, #myRangeOutput2 {
font-family: "Lucida Console", Courier, monospace;
}
.sliders {
display: grid;
}
.sliders input[type="range"] {
grid-column: 1;
grid-row: 1;
}
</style>
</head>
<body>
<form method="post" action="">
<div><label for="myRange1">Bereik van <span id="myRangeOutput1"></span> tot <span id="myRangeOutput2"></span></label></div>
<div class="sliders">
<input type="range" min="0" max="100" step="5" value="25" id="myRange1" name="myRange1" />
<input type="range" min="0" max="100" step="5" value="75" id="myRange2" name="myRange2" />
</div>
<script>
var sliderStart = document.getElementById("myRange1");
var output1 = document.getElementById("myRangeOutput1");
output1.innerHTML = sliderStart.value;
var sliderEinde = document.getElementById("myRange2");
var output2 = document.getElementById("myRangeOutput2");
output2.innerHTML = sliderEinde.value;
sliderStart.oninput = function()
{
if(this.value>95) {this.value=95;}
if(this.value>=sliderEinde.value) {
sliderEinde.value=parseInt(this.value)+5;
}
output1.innerHTML = sliderStart.value;
output2.innerHTML = sliderEinde.value;
}
sliderEinde.oninput = function()
{
if(this.value<5) {this.value=5;}
if(this.value<=sliderStart.value) {
sliderStart.value=parseInt(this.value)-5;
}
output1.innerHTML = sliderStart.value;
output2.innerHTML = sliderEinde.value;
}
</script>
</form>
</body>
</html>
Mijn probleem echter nu is dat de startknop (groen) achter de lijn van het einde zit en ik deze dus niet kan selecteren met de muis. Het lukt wel met het toetsenbord.
Jan
Bijvoorbeeld jQuery UI heeft een range slider met een minimum en maximum. Die wordt vaak gebruikt voor het instellen van een prijsbereik.
Demo:
https://jqueryui.com/resources/demos/slider/range.html
Had ik net alles van jq buiten gesmeten :)
Code (php)
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Range</title>
<meta name="viewport" content="user-scalable=1, width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
#content {
max-width: 700px;
margin: 1.000em auto;
padding: 1.000em;
border: 1px solid #999;
}
.range-slider {
max-width: 600px;
margin: auto;
text-align: center;
position: relative;
height: 6em;
}
#Range1,
#Range2 {
position: absolute;
left: 0;
bottom: 0;
}
#prijs-min,
#prijs-max {
border: 1px solid #ddd;
text-align: center;
font-size: 1.6em;
width: 6em;
}
#prijs-min:invalid,
#prijs-max:invalid,
#prijs-min:out-of-range,
#prijs-max:out-of-range {
border: 2px solid #ff6347;
}
#Range1,
#Range2 {
-webkit-appearance: none;
width: 100%;
}
#Range1:focus,
#Range1:focus {
outline: none;
}
#Range1:focus::-webkit-slider-runnable-track,
#Range2:focus::-webkit-slider-runnable-track {
background: #2497e3;
}
#Range1::-webkit-slider-runnable-track,
#Range2::-webkit-slider-runnable-track {
width: 100%;
height: 15px;
cursor: pointer;
animate: 0.2s;
background: #d3d3d3;
border-radius: 5px;
box-shadow: none;
border: 0;
}
#Range1::-webkit-slider-thumb,
#Range2::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 25px;
width: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
#myRangeOutput {
font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>
<div id="content">
<?php
$min_default = 1000;
$max_default = 3000;
$prijs_min = $min_default;
$prijs_max = $max_default;
if( $_SERVER['REQUEST_METHOD'] === "POST" )
{
$prijs_min = $_POST['prijs-min'] ;
$prijs_max = $_POST['prijs-max'] ;
$min_default = $prijs_min;
$max_default = $prijs_max;
}
?>
<form method="post" action="">
<div class="range-slider">
<!-- verwijder readonly als je getallen met de hand invoert -->
<span id="myRangeOutput">Prijs van <input type="number" id="prijs-min" name="prijs-min" value="<?php echo $prijs_min; ?>" min="0" max="5000" readonly> tot <input type="number" id="prijs-max" name="prijs-max" value="<?php echo $prijs_max; ?>" min="0" max="5000" readonly></span>
<!-- verwijder naar believen ook step="50" als de waarde in enkele eenheden moet. -->
<input id="Range1" value="<?php echo $min_default; ?>" step="50" min="0" max="5000" type="range">
<input id="Range2" value="<?php echo $max_default; ?>" step="50" min="0" max="5000" type="range">
</div>
<div style="clear: both; margin-top: 1.500em; border-top: 0.100em solid green;"> </div>
<input type="submit" name="" value="submit" />
</form>
<?php
if( $_SERVER['REQUEST_METHOD'] === "POST" )
{
echo '<pre>' . print_r( $_POST, TRUE ) . '</pre>';
echo '<p>Minimumprijs = <code>' . $prijs_min . '</code><br />Maximumprijs = <code>' . $prijs_max . '</code></p>';
}
?>
<hr />
<p><button onclick="location.href = '?';">Opnieuw</button></p>
<script>
(function() {
const parent = document.querySelector('.range-slider');
if (!parent) {
return;
}
var ranges = [document.getElementById('Range1'), document.getElementById('Range2')];
var prices = [document.getElementById('prijs-min'), document.getElementById('prijs-max')];
ranges.forEach((el) => {
el.oninput = () => {
let range1 = parseFloat(ranges[0].value), range2 = parseFloat(ranges[1].value);
if ( range1 > range2 )
{
[range1, range2] = [range2, range1];
}
prices[0].value = range1;
prices[1].value = range2;
}
});
// ==== is voor als je de getallen met de hand invoert
prices.forEach((el) => {
el.oninput = () => {
let price1 = parseFloat(prices[0].value), price2 = parseFloat(prices[1].value);
if (price1 > price2) {
let tmp = price1;
prices[0].value = price2;
prices[1].value = tmp;
}
ranges[0].value = price1;
ranges[1].value = price2;
}
});
})();
</script>
<p>Gebaseerd op : <a href="https://getbutterfly.com/how-to-create-a-price-range-slider-using-vanilla-javascript/" target="_blank">https://getbutterfly.com/how-to-create-a-price-range-slider-using-vanilla-javascript/</a></p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Range</title>
<meta name="viewport" content="user-scalable=1, width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
#content {
max-width: 700px;
margin: 1.000em auto;
padding: 1.000em;
border: 1px solid #999;
}
.range-slider {
max-width: 600px;
margin: auto;
text-align: center;
position: relative;
height: 6em;
}
#Range1,
#Range2 {
position: absolute;
left: 0;
bottom: 0;
}
#prijs-min,
#prijs-max {
border: 1px solid #ddd;
text-align: center;
font-size: 1.6em;
width: 6em;
}
#prijs-min:invalid,
#prijs-max:invalid,
#prijs-min:out-of-range,
#prijs-max:out-of-range {
border: 2px solid #ff6347;
}
#Range1,
#Range2 {
-webkit-appearance: none;
width: 100%;
}
#Range1:focus,
#Range1:focus {
outline: none;
}
#Range1:focus::-webkit-slider-runnable-track,
#Range2:focus::-webkit-slider-runnable-track {
background: #2497e3;
}
#Range1::-webkit-slider-runnable-track,
#Range2::-webkit-slider-runnable-track {
width: 100%;
height: 15px;
cursor: pointer;
animate: 0.2s;
background: #d3d3d3;
border-radius: 5px;
box-shadow: none;
border: 0;
}
#Range1::-webkit-slider-thumb,
#Range2::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 25px;
width: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
#myRangeOutput {
font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>
<div id="content">
<?php
$min_default = 1000;
$max_default = 3000;
$prijs_min = $min_default;
$prijs_max = $max_default;
if( $_SERVER['REQUEST_METHOD'] === "POST" )
{
$prijs_min = $_POST['prijs-min'] ;
$prijs_max = $_POST['prijs-max'] ;
$min_default = $prijs_min;
$max_default = $prijs_max;
}
?>
<form method="post" action="">
<div class="range-slider">
<!-- verwijder readonly als je getallen met de hand invoert -->
<span id="myRangeOutput">Prijs van <input type="number" id="prijs-min" name="prijs-min" value="<?php echo $prijs_min; ?>" min="0" max="5000" readonly> tot <input type="number" id="prijs-max" name="prijs-max" value="<?php echo $prijs_max; ?>" min="0" max="5000" readonly></span>
<!-- verwijder naar believen ook step="50" als de waarde in enkele eenheden moet. -->
<input id="Range1" value="<?php echo $min_default; ?>" step="50" min="0" max="5000" type="range">
<input id="Range2" value="<?php echo $max_default; ?>" step="50" min="0" max="5000" type="range">
</div>
<div style="clear: both; margin-top: 1.500em; border-top: 0.100em solid green;"> </div>
<input type="submit" name="" value="submit" />
</form>
<?php
if( $_SERVER['REQUEST_METHOD'] === "POST" )
{
echo '<pre>' . print_r( $_POST, TRUE ) . '</pre>';
echo '<p>Minimumprijs = <code>' . $prijs_min . '</code><br />Maximumprijs = <code>' . $prijs_max . '</code></p>';
}
?>
<hr />
<p><button onclick="location.href = '?';">Opnieuw</button></p>
<script>
(function() {
const parent = document.querySelector('.range-slider');
if (!parent) {
return;
}
var ranges = [document.getElementById('Range1'), document.getElementById('Range2')];
var prices = [document.getElementById('prijs-min'), document.getElementById('prijs-max')];
ranges.forEach((el) => {
el.oninput = () => {
let range1 = parseFloat(ranges[0].value), range2 = parseFloat(ranges[1].value);
if ( range1 > range2 )
{
[range1, range2] = [range2, range1];
}
prices[0].value = range1;
prices[1].value = range2;
}
});
// ==== is voor als je de getallen met de hand invoert
prices.forEach((el) => {
el.oninput = () => {
let price1 = parseFloat(prices[0].value), price2 = parseFloat(prices[1].value);
if (price1 > price2) {
let tmp = price1;
prices[0].value = price2;
prices[1].value = tmp;
}
ranges[0].value = price1;
ranges[1].value = price2;
}
});
})();
</script>
<p>Gebaseerd op : <a href="https://getbutterfly.com/how-to-create-a-price-range-slider-using-vanilla-javascript/" target="_blank">https://getbutterfly.com/how-to-create-a-price-range-slider-using-vanilla-javascript/</a></p>
</div>
</body>
</html>
Beiden wel bedankt.
Nogmaals bedankt
Code (php)
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Range sliders</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script>
window.addEventListener("load", WindowIsLoaded, false);
function WindowIsLoaded() {
const parents = document.querySelectorAll('.range-slider');
for(i=0;i<parents.length;i++) {
var parent=parents[i];
var ranges = [
document.querySelector("#" + parent.id + ' input[type="range"]:nth-of-type(1)'),
document.querySelector("#" + parent.id + ' input[type="range"]:nth-of-type(2)')];
var prices = [
document.querySelector("#" + parent.id + ' input[type="number"]:nth-of-type(1)'),
document.querySelector("#" + parent.id + ' input[type="number"]:nth-of-type(2)')];
ranges.forEach((el) => {
el.oninput = function() {
let p=this.parentElement;
let ranges = [
document.querySelector("#" + p.id + ' input[type="range"]:nth-of-type(1)'),
document.querySelector("#" + p.id + ' input[type="range"]:nth-of-type(2)')];
var prices = [
document.querySelector("#" + p.id + ' input[type="number"]:nth-of-type(1)'),
document.querySelector("#" + p.id + ' input[type="number"]:nth-of-type(2)')];
let range1 = parseFloat(ranges[0].value), range2 = parseFloat(ranges[1].value);
if ( range1 > range2 )
{
[range1, range2] = [range2, range1];
}
prices[0].value = range1;
prices[1].value = range2;
}
});
}
}
</script>
<style>
#content {
max-width: 700px;
margin: 1.000em auto;
padding: 1.000em;
border: 1px solid #999;
}
.range-slider {
max-width: 600px;
margin: auto;
text-align: center;
position: relative;
height: 6em;
}
.range
{
position: absolute;
left: 0;
bottom: 0;
}
.prijs
{
border: 1px solid #ddd;
text-align: center;
font-size: 1.6em;
width: 6em;
}
.prijs:invalid {
border: 2px solid #ff6347;
}
.range {
-webkit-appearance: none;
width: 100%;
}
.range:focus {
outline: none;
}
.range:focus::-webkit-slider-runnable-track {
background: #2497e3;
}
.range::-webkit-slider-runnable-track {
width: 100%;
height: 15px;
cursor: pointer;
/* animate: 0.2s; */
background: #d3d3d3;
border-radius: 5px;
box-shadow: none;
border: 0;
}
.range::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 25px;
width: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
.RangeOutput {
font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>
<div id="content">
<form method="post" action="slider2.php">
<?php
for($i=0;$i<5;$i++) {
$prijs_min = (int)($_POST['prijs-min'][$i] ?? 1000);
$prijs_max = (int)($_POST['prijs-max'][$i] ?? 3000);
?>
<div class="range-slider" id="slider<?php echo $i; ?>">
<!-- verwijder readonly als je getallen met de hand invoert -->
<span class="RangeOutput" id="myRangeOutput<?php echo $i; ?>">
Prijs van <input class="prijs" type="number" name="prijs-min[]" value="<?php echo $prijs_min; ?>" min="0" max="5000" readonly>
tot
<input class="prijs" type="number" name="prijs-max[]" value="<?php echo $prijs_max; ?>" min="0" max="5000" readonly>
</span>
<!-- verwijder naar believen ook step="50" als de waarde in enkele eenheden moet. -->
<input class="range" value="<?php echo $prijs_min; ?>" step="50" min="0" max="5000" type="range" name="slide1[]">
<input class="range" value="<?php echo $prijs_max; ?>" step="50" min="0" max="5000" type="range" name="slide2[]">
</div>
<div style="clear: both; margin-top: 1.500em; border-top: 0.100em solid green;"> </div>
<?php
}
?>
<input type="submit" name="submit" value="submit" />
</form>
<?php
if( $_SERVER['REQUEST_METHOD'] === "POST" )
{
echo '<pre>' . print_r( $_POST, TRUE ) . '</pre>';
}
?>
<hr>
<p><button onclick="location.href = '?';">Opnieuw</button></p>
Gebaseerd op:
<ol>
<li>
<a href="https://getbutterfly.com/how-to-create-a-price-range-slider-using-vanilla-javascript/" target="_blank">getbutterfly</a>
<li>
<a href="https://www.phphulp.nl/php/forum/topic/tag-met-begin-en-eind-range/104279/last/" target="_blank">phphulp.nl</a>
</ol>
</div>
</body>
</html>
<html lang="nl">
<head>
<title>Range sliders</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script>
window.addEventListener("load", WindowIsLoaded, false);
function WindowIsLoaded() {
const parents = document.querySelectorAll('.range-slider');
for(i=0;i<parents.length;i++) {
var parent=parents[i];
var ranges = [
document.querySelector("#" + parent.id + ' input[type="range"]:nth-of-type(1)'),
document.querySelector("#" + parent.id + ' input[type="range"]:nth-of-type(2)')];
var prices = [
document.querySelector("#" + parent.id + ' input[type="number"]:nth-of-type(1)'),
document.querySelector("#" + parent.id + ' input[type="number"]:nth-of-type(2)')];
ranges.forEach((el) => {
el.oninput = function() {
let p=this.parentElement;
let ranges = [
document.querySelector("#" + p.id + ' input[type="range"]:nth-of-type(1)'),
document.querySelector("#" + p.id + ' input[type="range"]:nth-of-type(2)')];
var prices = [
document.querySelector("#" + p.id + ' input[type="number"]:nth-of-type(1)'),
document.querySelector("#" + p.id + ' input[type="number"]:nth-of-type(2)')];
let range1 = parseFloat(ranges[0].value), range2 = parseFloat(ranges[1].value);
if ( range1 > range2 )
{
[range1, range2] = [range2, range1];
}
prices[0].value = range1;
prices[1].value = range2;
}
});
}
}
</script>
<style>
#content {
max-width: 700px;
margin: 1.000em auto;
padding: 1.000em;
border: 1px solid #999;
}
.range-slider {
max-width: 600px;
margin: auto;
text-align: center;
position: relative;
height: 6em;
}
.range
{
position: absolute;
left: 0;
bottom: 0;
}
.prijs
{
border: 1px solid #ddd;
text-align: center;
font-size: 1.6em;
width: 6em;
}
.prijs:invalid {
border: 2px solid #ff6347;
}
.range {
-webkit-appearance: none;
width: 100%;
}
.range:focus {
outline: none;
}
.range:focus::-webkit-slider-runnable-track {
background: #2497e3;
}
.range::-webkit-slider-runnable-track {
width: 100%;
height: 15px;
cursor: pointer;
/* animate: 0.2s; */
background: #d3d3d3;
border-radius: 5px;
box-shadow: none;
border: 0;
}
.range::-webkit-slider-thumb {
z-index: 2;
position: relative;
box-shadow: 0px 0px 0px #000;
border: 1px solid #2497e3;
height: 25px;
width: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
.RangeOutput {
font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>
<div id="content">
<form method="post" action="slider2.php">
<?php
for($i=0;$i<5;$i++) {
$prijs_min = (int)($_POST['prijs-min'][$i] ?? 1000);
$prijs_max = (int)($_POST['prijs-max'][$i] ?? 3000);
?>
<div class="range-slider" id="slider<?php echo $i; ?>">
<!-- verwijder readonly als je getallen met de hand invoert -->
<span class="RangeOutput" id="myRangeOutput<?php echo $i; ?>">
Prijs van <input class="prijs" type="number" name="prijs-min[]" value="<?php echo $prijs_min; ?>" min="0" max="5000" readonly>
tot
<input class="prijs" type="number" name="prijs-max[]" value="<?php echo $prijs_max; ?>" min="0" max="5000" readonly>
</span>
<!-- verwijder naar believen ook step="50" als de waarde in enkele eenheden moet. -->
<input class="range" value="<?php echo $prijs_min; ?>" step="50" min="0" max="5000" type="range" name="slide1[]">
<input class="range" value="<?php echo $prijs_max; ?>" step="50" min="0" max="5000" type="range" name="slide2[]">
</div>
<div style="clear: both; margin-top: 1.500em; border-top: 0.100em solid green;"> </div>
<?php
}
?>
<input type="submit" name="submit" value="submit" />
</form>
<?php
if( $_SERVER['REQUEST_METHOD'] === "POST" )
{
echo '<pre>' . print_r( $_POST, TRUE ) . '</pre>';
}
?>
<hr>
<p><button onclick="location.href = '?';">Opnieuw</button></p>
Gebaseerd op:
<ol>
<li>
<a href="https://getbutterfly.com/how-to-create-a-price-range-slider-using-vanilla-javascript/" target="_blank">getbutterfly</a>
<li>
<a href="https://www.phphulp.nl/php/forum/topic/tag-met-begin-en-eind-range/104279/last/" target="_blank">phphulp.nl</a>
</ol>
</div>
</body>
</html>