Кто-нибудь может подсказать похожий range slider (nstSlider)?

Question

[Вадим Белкин]

В общем ищу слайдер диапазона/цены (Range slider). Аналогичные nstSlider или Foundation Range Sliders, когда слайдер уже изначально пишется div'ами, а не плагин создает его структуру. К сожалению в Foundation нет возможности делать несколько ползунков, у nstSlider тоже есть пара недостатков для меня. Кто-нибудь встречал подобные слайдеры?

Comments

[Влад]

Что значит "нельзя делать несколько ползунков"? Подробнее опишите проблему или что требуется

[Вадим Белкин]

Влад: range-slider-handle - у Range Foundation можно делать только 1 такой ползунок, нужна возможность 2. Но дело не в этом, нужен слайдер который изначально будет вставлен на страницу html структурой (ползунки, полоса диапазона и т.п.) типа

<div class="range-slider" data-slider>
  <span class="range-slider-handle" role="slider" tabindex="0"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

У большинства же плагинов требуется только div или input, и при вызове плагина он сам создает обертки и структуру слайдера.

[Влад]

BelkinVadim: то есть 2 ползунка на 1 полоске или как?

Answer 1

[Денис Инешин]

Ion.RangeSlider

Comments

[Вадим Белкин]

Этот плагин создает обертки/виджет при инизиализации. Мне нужен такой плагин, в котором изначально верстка слайдера уже вставлена в код

[Денис Инешин]

BelkinVadim: а зачем вам изначально вставленный код? Вы хотите его кастомизировать?

[Вадим Белкин]

Иногда из за скорости интернета при медленной загрузки плагинов и их инициализации бывает следующее, показывается элемент (input или div, который будет стилизовать плагин), пустой или стандартный, а после инициализации он стилизуется обертками и получается скачек блока по высоте, резкое появление. Хотелось бы чтобы изначально страница загружалась с готовыми элементами.

[Денис Инешин]

BelkinVadim: это можно элементарно компенсировать. Высота плагина заранее известна. Оборачиваете всё в контейнер и всё. Input так же можно заранее спрятать. Вы даже можете установить у контейнера фоном какую-нибудь гифку прелоадер для красоты.

[Вадим Белкин]

Такой подход не практичный, могут использоваться до 3 разных стилизаций слайдера и под каждый фиксированную высоту задавать, и опять же на счёт прелоадера заморачиваться.

[Денис Инешин]

BelkinVadim: вовсе нет, вы слишком заморачиваетесь. Слайдер всё равно перерисует сам себя после инициализации, когда подсчитает все значения, так что смысл вставлять html совершенно не понятен. К тому же, слайдер может использовать разный html для разных ситуаций.

[Вадим Белкин]

Не проблематично изначально слайдер уже с расставленными по местам ползунками вставить. В php ползункам и шкале через style left/top с нужными процентами выставить, все равно в атрибуты слайдера нужно будет выводить текущие значения и min/max, из них собственно и проценты для позиции ползунков и шкалы получим.

Вариант с прелоадером тоже не плох, отложу как запасной.