Как реализовать двойной фильтр (ползунок) на Vue в input type='range'?

Question

[alaskafx]

В общем, вся суть вопроса уже описана в сути вопроса:

Как реализовать двойной фильтр (ползунок) на Vue в input type='range':

?

Answer 1

[Максим Морев]

Нативными средствами никак, вам нужен кастомный контрол.
Вы будете долго искать что-то более-менее адекватное и остановитесь на этом компоненте. Пожалуйста.
Возможно, под Vue 3 есть что-то получше, но для меня это пока неактуально - не смотрел.

Comments

[alaskafx]

Извиняюсь, что сразу не уточнил в вопросе (уже обновил):
Он должен выглядеть примерно так..

[Максим Морев]

alaskafx, это можно настроить на такой вид.
Если вы ищете готовое решение, которое визуально выглядит точно так же, как на вашем кастомном дизайне - вы его не найдёте никогда.

Берёте решение, выбираете предустановленную тему, максимально похожую на то, что надо вам, после чего переназначаете стили внутренних элементов на те, которые нужны вам.

К слову, дефолтная тема практически так и выглядит: https://nightcatsama.github.io/vue-slider-componen...

О том, как через CSS изменить цвет заливки и обводки рассказывать, надеюсь, не нужно :)

[alaskafx]

Максим Морев, понял, спасибо большое! :)