Slider – zadawanie przez przesuwanie

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):

suwak1Do 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:

suwak_firefox

Google Chrome:

suwak_chrome

Internet Explorer:

suwak_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&nbsp;<span id="slider1Val" class="val"></span>&nbsp;&deg;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&nbsp;<span id="slider2Val" class="val"></span>&nbsp;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/

Avatar

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Dodaj komentarz