Serdecznie zapraszam na stronę fotoRAF – moje fotografie z ofertą dotyczącą fotografii.
Gdy pojawi się potrzeba wprowadzania wartości liczbowej to możemy posłużyć się „sliderem” (suwakiem), który znany jest od dawna w wielu środowiskach programistycznych.
Wykorzystać można do tego celu tag <input>, który z parametrem range tworzy suwak:
<input type=range">
o wyglądzie takim jak zamieszczony poniżej (obrazek z Mozilla Firefox):
Do szału toto doprowadzić nie może no ale lepiej taki niż żaden :).
Suwak możemy dostosować do własnych potrzeb. Można podać zakres minimalny i maksymalny. Można podać „skok” z jakim zmieniać będzie się wartość powiązana z suwakiem. Można dodać domyślną wartość val, którą będzie przyjmować suwak po uruchomieniu strony. Jeśli pokusimy się o takie zmiany w kodzie strony umieścić musimy coś podobnego. Oczywiście min może być wartością ujemną a step np. dziesiątkami.
<input type="range" min="0" max="40" step="0.1" val="20">
Sam suwak to trochę mało by coś sensownego z tego wyszło. Poniżej „goły suwak” oraz dwa przykłady użycia suwaka z dodatkami.
Żeby tak fajnie nie było to każda przeglądarka po swojemu wyświetla ten element. Przykłady poniżej.
Mozilla Firefox:
Google Chrome:
Internet Explorer:
Powyższe suwaki generuje kod zamieszczony poniżej:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider</title>
<style type="text/css">
#divSlider {
font-family: sans-serif;
border: 1px solid #AAA;
width: 300px;
height: 50px;
background: #EEE;
margin: 2px;
padding: 5px;
box-shadow: 0 0 2px #CCC;
text-align: center;
}
.minmax {
font-size: 0.9em;
background-color: #FFF;
padding: 0 4px 0 4px;
border: 1px solid rgba(7,7,7,0.2);
}
.val {
font-size: 0.9em;
padding: 0 4px 0 4px;
background-color: #fd0;
border: 1px solid rgba(7,7,7,0.2);
}
.title {
left: 10px;
text-align: center;
font-size: 1em;
position: relative;
}
input {
width: 200px;
}
</style>
<script type="text/javascript">
function showSliderRange() {
var arrMin = new Array();
var arrMax = new Array();
//pobranie wszystkich elementów strony z nazwą "slider"
var elements = document.getElementsByName('slider');
for (var i=0;i<elements.length;i++) {
arrMin[i] = document.getElementById("slider"+(i+1)).min;
arrMax[i] = document.getElementById("slider"+(i+1)).max;
}
for(var i=0;i<elements.length;i++) {
document.getElementById("slider" + (i+1) + "Min").innerHTML = parseFloat(arrMin[i]).toFixed(1);
document.getElementById("slider" + (i+1) + "Max").innerHTML = parseFloat(arrMax[i]).toFixed(1);
}
}
function showSliderValue() {
//pobranie wszystkich elementów strony z nazwą "slider"
var elements = document.getElementsByName('slider');
for(var i=0;i<elements.length;i++) {
var wartosc = document.getElementById("slider" + (i+1)).value
document.getElementById("slider"+(i+1)+"Val").innerHTML = parseFloat(wartosc).toFixed(1);
}
}
</script>
</head>
<body onload="showSliderRange();showSliderValue();">
<div><input type="range"></div>
<div id="divSlider">
<div>zadana temp. wody <span id="slider1Val" class="val"></span> °C</div>
<div>
<span id="slider1Min" class="minmax"></span><input type="range" min="20" max="80" step="0.5" value="40" id="slider1" name="slider" onchange="showSliderValue();" onmousemove="showSliderValue();"><span id="slider1Max" class="minmax"></span>
</div>
</div>
<div id="divSlider">
<div>zadany przepływ <span id="slider2Val" class="val"></span> dm3/h</div>
<div>
<span id="slider2Min" class="minmax"></span><input type="range" min="0" max="40" step="0.1" id="slider2" name="slider" onchange="showSliderValue();" onmousemove="showSliderValue();"><span id="slider2Max" class="minmax"></span>
</div>
</div>
</body>
</html>
Jak widać w powyższym kodzie używamy javascript do odczytu ustawień suwaków i wyświetlenia ich na stronie oraz do odczytu ustawianej wartości. Kod nie wymaga chyba większego tłumaczenia więc tak tylko w kilku słowach. Funkcja showSliderRange() odczytuje wartości progów suwaków i jest wywoływana przy ładowaniu strony zdarzeniem onload. Zdarzeniem onload wywoływana jest też funkcja showSliderValue() mająca za zadanie odczyt wartości suwaków.
funkcja showSliderValue() odczytuje wartość suwaka – musi być ona wywołana zdarzeniamia onchange oraz onmousemove.
Inny artykuł na temat sliderów znajduje się tutaj ->https://www.rafalrebacz.pl/2015/10/13/slider-w-innej-postaci-tym-razem-jquery/
