Jak tworzyć: suwak skalowy

Utwórz suwak skalowy

Krok 1 - Dodaj HTML:

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

Krok 2 - Dodaj CSS:

.slidecontainer {
  width: 100%; /* szerokość zewnętrznego kontenera */
{}
/* sam suwak */
.slider {
  -webkit-appearance: none;  /* zakrycie domyślnego stylu CSS */
  appearance: none;
  width: 100%; /* pełna szerokość */
  height: 25px; /* określona wysokość */
  background: #d3d3d3; /* szary tło */
  outline: none; /* usunięcie konturu */
  opacity: 0.7; /* ustawienie przezroczystości (używane podczas najechania myszą) */
  -webkit-transition: .2s; /* efekt przejścia 0.2 sekundy */
  transition: opacity .2s;
{}
/* efekt najechania myszą */
.slider:hover {
  opacity: 1; /* pełne wyświetlenie podczas najechania myszą */
{}
/* uchwyt suwaka (używając -webkit- (Chrome, Opera, Safari, Edge) i -moz- (Firefox) do zakrycia domyślnego wyglądu) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* zakrycie domyślnego wyglądu */
  appearance: none;
  width: 25px; /* Ustal określony szerokość uchwytu suwaka */
  height: 25px; /* Wysokość uchwytu suwaka */
  background: #04AA6D; /* Tło zielone */
  cursor: pointer; /* Kursor myszy podczas nawigacji */
{}
.slider::-moz-range-thumb {
  width: 25px; /* Ustal określony szerokość uchwytu suwaka */
  height: 25px; /* Wysokość uchwytu suwaka */
  background: #04AA6D; /* Tło zielone */
  cursor: pointer; /* Kursor myszy podczas nawigacji */
{}

Spróbuj sam

Krok trzeci - Dodaj JavaScript:

Utwórz dynamiczny suwak zakresu za pomocą JavaScript, aby wyświetlić bieżącą wartość:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Wyświetl domyślną wartość suwaka
// Aktualizuj bieżącą wartość suwaka (każdy raz, gdy przeciągasz uchwyt suwaka)
slider.oninput = function() {
  output.innerHTML = this.value;
{}

Spróbuj sam

Okrągły suwak

Aby utworzyć okrągły suwak z uchwytem, użyj: border-radius Atrybuty.

Wskazówka:Jeśli chcesz różnej wysokości (w tym przykładzie 15 pikseli i 25 pikseli), ustaw wysokość suwaka na inną wartość niż suwak palca:

Przykład

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
{}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #04AA6D;
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
{}

Spróbuj sam

Ikona/symbol suwaka

Aby utworzyć suwak z ikoną/obrazem, użyj: background Wprowadź atrybut i URL obrazu:

Przykład

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}
.slider::-moz-range-thumb {
  width: 23px;
  height: 25px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
{}

Spróbuj sam