<divelopers>: “Enhanced Range Input Во всех браузерах уже достаточно давно существует…”

Enhanced Range Input

Во всех браузерах уже достаточно давно существует элемент <input type="range">, отображающий слайдер с ползунком для изменения значения в заданном диапазоне. Элемент вполне можно использовать, но есть ряд проблем:

- Сложно стилизовать из-за ограничений и различий в вендорных псевдо-элементах;
- Не все части в принципе возможно стилизовать;
- Не поддерживается несколько ползунков, что часто встречается в фильтрах.

Из-за этого стандартный слайдер заменяют JS-библиотеками, вроде noUiSlider. Предложение Enhanced Range Input от OpenUI призвано решить проблемы и предоставить нативное решение.

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться.

Первое предложение связано со спецификацией CSS Form Control Styling, о которой я уже рассказывал. Это возможность включить «базовый» режим для стандартных элементов управления с помощью свойства appearance.

В «базовом» режиме элемент управления получает набор минималистичных стилей, которые стандартизированы и одинаковы для всех браузеров. Также «базовый» режим открывает доступ к новым псевдо-элементам для стилизации внутренних частей.

input[type="range"] {
  appearance: base;
  
  ::slider-track {
    /* Шкала, по которой перемещается ползунок */
  }

  ::slider-fill {
    /* Заполненная часть шкалы */
  }
  
  ::slider-thumb {
    /* Ползунок */
  }

  ::slider-segment {
    /* Часть шкалы между двумя ползунками */
  }

  ::slider-tick {
    /* Засечки при использовании <datalist> */
  }

  ::slider-tick-label {
    /* Подпись засечки при использовании <datalist> */
  }
}

Далее предлагается новый элемент <rangegroup> для создания слайдера с несколькими ползунками. Это контейнер, который оркестрирует элементами <input type="range"> и отображает единый элемент управления.

<rangegroup>
  <legend>Цена</legend>

  <label for="price-min">
    Минимальная цена
  </label>
  <input
    type="range"
    id="price-min"
    name="price-min"
    value="25"
  >

  <label for="price-max">
    Максимальная цена
   </label>
  <input
    type="range"
    id="price-max"
    name="price-max"
    value="75"
  >
</rangegroup>

У элемента <rangegroup> можно указать атрибуты min, max, name, list и stepbetween. Первые четыре работают как у <input type="range">, но определяют общий диапазон. stepbetween задаёт минимальную дистанцию между двумя ползунками.

Атрибуты min, max, value, name и step у <input> будут корректно взаимодействовать с атрибутами у <rangegroup>. Так min и max у <rangegroup> ограничивают min и max у <input>, чтобы они не выходили за пределы диапазона.

Предусмотрена возможность привязки элемента <datalist> с набором <option> к <rangegroup> для создания засечек с подсказками, к которым «магнитятся» ползунки. С псевдо-элементами ::slider-tick и ::slider-tick-label их можно стилизовать.

Промежутки между несколькими ползунками также можно стилизовать, используя новый псевдо-элемент ::slider-segment в сочетании с псевдо-классами :nth-child. Аналогично можно по-разному стилизовать каждый ползунок.

Для работы с диапазонами и несколькими значениями у <rangegroup> будут соответствующие свойства и методы. Никуда не исчезнет API самих элементов <input type="range">, с которыми можно работать, получив их через <rangegroup>.

const rangeGroup = document.querySelector(
  'rangegroup[name="price-range"]'
);

// Получение значений
console.log(rangeGroup.values); 
// [100, 750]

// Получение слайдеров
const inputs = rangeGroup.inputs;
console.log(inputs.length); 
// 2

// Установка значений
rangeGroup.setRangeValue(0, 150);
console.log(rangeGroup.values);
// [150, 750]

Предложение развивается и есть ряд открытых вопросов. Примеры кода и API можно посмотреть в самом предложении. Также автор подготовил прототип в виде веб-компонента и интерактивную площадку с примерами. Ждём реализацию в браузерах.

#html #css #js #ui