2016-11-05 51 views
5

Mam zakres wprowadzania HTML z paczką zmian CSS w wyglądzie, i zastanawiałem się, czy był jakiś sposób, aby go płynnie zmienić z dowolnego miejsca na miejsce, w którym użytkownik się zmienia ?Zakres wprowadzania html kciuk gładki ruch

input[type=range] { 
 
     -webkit-appearance: none; 
 
     width: 100%; 
 
     height: 20px; 
 
     border-radius: 5px; 
 
     border: 1px solid; 
 
     background: none; 
 
     box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset; 
 
     transition: 0.4s all ease-out; 
 
     outline: none; 
 
    } 
 

 
    input[type=range]::-webkit-slider-thumb { 
 
     -webkit-appearance: none; 
 
     width: 30px; 
 
     height: 30px; 
 
     background-color: #CCC; 
 
     border: solid 1px #333; 
 
     border-radius: 4px; 
 
     box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset; 
 
     cursor: pointer; 
 
     transition: 0.4s all ease-out; 
 
    } 
 

 
    input[type=range]:hover { 
 
     background: rgba(255, 255, 255, 0.2); 
 
     box-shadow: 0px 0px 13px 0px #444, 0px 0px 20px 0px #444 inset; 
 
    } 
 

 
    input[type=range]:hover::-webkit-slider-thumb { 
 
     border: solid 1px #444; 
 
     box-shadow: 0px 0px 15px 0px #444, 0px 0px 20px 0px #444 inset; 
 
    } 
 

 
    input[type=range]:focus { 
 
     background: rgba(255, 255, 255, 0.4); 
 
     box-shadow: 0px 0px 18px 0px #333, 0px 0px 15px 0px #333 inset; 
 
    } 
 

 
    input[type=range]:focus::-webkit-slider-thumb { 
 
     border: solid 1px #333; 
 
     box-shadow: 0px 0px 22px 0px #333, 0px 0px 15px 0px #333 inset; 
 
    }
<input type="range" id="brightness_slider" value="90" step="1" min="30" max="100">

Odpowiedz

1

te są rzeczy, które mają wpływ na płynność:

  1. Szerokość banera
  2. min/max zakresu
  3. Wielkość etapów

Więc jeśli masz:

  1. 1000px szeroki zakres wejściowy
  2. 0 - 1000 Zakres
  3. rozmiar Krok 1

Każdy krok będzie tylko 1px, i to będzie zupełnie gładka .

Jeśli masz:

  1. 1000px szeroki zakres wejściowy
  2. 0 -100 zakres
  3. Krok rozmiar 25

Będzie przystawki między wartościami dopuszczalnymi, pojawiając się mniej płynna.

To jest naprawdę cecha interakcji między rozmiarem kroku a zakresem i zapewnia użytkownikowi przydatne informacje zwrotne na temat dopuszczalnych wartości.