Komt dit in de buurt?
<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>
En dan dit :
<?php echo ( $_POST['myRange']; ?>
Link gekopieerd
Spijtig genoeg niet. Er is maar 1 waarde met de hetzelfde range als vermeld in start topic. Wel slecht vermeld van mij. Ik sprak over tag terwijl het een attribuut is van input. Sorry!
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
[size=xsmall]
Toevoeging op 07/03/2022 08:33:46: [/size]
Ik heb op jouw basis wel al iets
<!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>
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
Link gekopieerd
Link gekopieerd
Dit is inderdaad wat ik zoek. Bedankt.
Link gekopieerd
Zonder jQuery
<!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>
Link gekopieerd
Prachtig. Meer nog hoe min en max wisselt als je voorbij de andere bol gaat.
Link gekopieerd
Ik heb er dit van gemaakt. Zodoende kan ik meerdere sliders gebruiken op 1 pagina. Momenteel heb ik er 2 nodig:)
Nogmaals bedankt
<!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>
Link gekopieerd
