Псевдоэлемент ::-moz-range-track

Псевдоэлемент ::-moz-range-track позволяет изменить стиль дорожки слайдера (рис. 1), созданного с помощью элемента <input type="range">. На другие элементы формы ::-moz-range-track не оказывает влияния.

Рис. 1. Дорожка слайдера

Синтаксис

input[type="range"]::-moz-range-track { … }

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>::-moz-range-track</title>
  <style>
   input[type="range"]::-moz-range-track {
    background: linear-gradient(to right, blue, red); /* Градиент */
    height: 10px; /* Высота */
    border-radius: 5px; /* Радиус скругления */
   }
   input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, blue, red); /* Градиент */
    height: 10px; /* Высота */
    border-radius: 5px; /* Радиус скругления */
   }
   input[type="range"]::-webkit-slider-thumb {
    transform: translateY(-3px); /* Смещаем вверх */
   }
  </style>
 </head>
 <body>
  <input type="range" min="0" max="100" value="50">
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Слайдер в браузере Firefox

Примечание

В браузерах на основе движков Blink (Google Chrome, Microsoft Edge, Opera) и Webkit (Apple Safari) работает псевдоэлемент ::-webkit-slider-runnable-track.

Спецификация

Это нестандартный псевдоэлемент и работает только в Firefox и в других браузерах на движке Gecko (Waterfox, Basilisk, Pale Moon и др.).

Браузеры

21
21
Псевдоэлементы