Slider w innej postaci – tym razem jQuery

Poprzednio męczyłem suwak oferowany przez HTML5 a teraz będzie suwak ale z wykorzystaniem jQuery oferowany przez jQueryUI.

Na początek do sekcji head naszej strony musimy dodać linki do potrzebnych zasobów (mogą być one pobrane np. z google -> https://developers.google.com/speed/libraries/#libraries)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"><!-- plik stylów dla jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Do kodu strony dodajemy div, który będzie naszym suwakiem:

<body>
    <!-- tutaj będzie nasz suwak -->
    <div id="slider"></div>
</body>

Jeszcze tylko skrypt, który definiuje nam suwak, który będzie zmieniał wartości od 0-100:

<script>
    $(function() {
        $("#slider").slider({
            min: 0,
            max: 100,
            range: false,
            step: 1,
            value: 60
        });
    });
</script>

Wygląd suwaka wg powyższego kodu:

Jeśli zmienimy odrobinę kod:

 <script>
$(function() {
    $("#slider").slider({
        min: 0,
        max: 100,
        range: true,
        step: 2,
        values: [20,80]
    });    
});
</script>

Wygląd zmienionego suwaka:

Powiązane wpisy:

  1. Slider – zadawanie przez przesuwanie
  2. Strzałki w css
  3. Shadow – cień w CSS
  4. Wskaźniki od highcharts.
  5. Mniej znaczy więcej czyli kilka słów o {LESS}

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 ;).

Jeden komentarz do “Slider w innej postaci – tym razem jQuery”

  1. Pingback: Slider – zadawanie przez przesuwanie | programowanie i co tam jeszcze do głowy wpadnie

Dodaj komentarz