Как в element UI связать ползунок диапазона с 2м input полями?

Question

[Дима Паутов]

Добрый вечер. Использую у себя на проекте вот такой вот фреймворк.
Произошла у меня загвоздка, при использовании компонента slider.

Что пытаюсь сделать

У меня есть фильтр, в котором есть блок, указанный в картинке. Я всё сделал, осталось только связать слайдер с 2мя полями, мин. и макс.
Так выглядит разметка блока с картинки(сокращённая):

<el-input v-model="catalogFilter.price.min" />
<el-input v-model="catalogFilter.price.max" />
<el-slider range />

и такой код в js:

data(){
  return {
    сatalogFilter: {
      price: {
        min: 12600,
        max: 123600
      }
    }
  }
}

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

Answer 1

[Александр Таратин]

В живую не тестил, но должно быть как-то так

<el-input v-model="catalogFilter.price[0]" />
<el-input v-model="catalogFilter.price[1]" />
<el-slider range v-model="catalogFilter.price"/>

data(){
  return {
    сatalogFilter: {
      price: [ 12600, 123600]
    }
  }
}

Comments

[Дима Паутов]

Собственно так и пробовал, да, это работает, но через одно место и как я понял, это связано с сами слайдером. Проблему уже понял

Answer 2

[0xD34F]

Так?

UPD. Как победить тормоза при большом интервале значений. Можно работать с интервалом, который не будет вызывать тормозов - уменьшить границы в 100 раз, например. А в полях ввода показывать настоящие значения. Ну а то, что таким образом станет заведомо невозможной точная настройка значений посредством слайдера - так она в любом случае невозможна для больших интервалов. В общем, вот примерчик того, как это можно сделать.

UPD. В более поздних версиях рендеринг был переделан, больше никаких тормозов.

Comments

[Дима Паутов]

Да, я так и сделал, но увидел, что она начинает дико лагать, когда значения большие. После понял, у него есть свойство stops, которое рисует кучу точек, в зависимости от диапазона. Так вот, при любом булевом значении, он либо выводит разметку, дивы, либо просто тег комментария. В общем, он в любом случае выводит эти тупые шаги, и если максимальное значение равно за 100к, например, то будут дикие лаги.

Попробуй сделать у тебя и ты увидишь)) Было принято решение, от этого говна избавится!

[0xD34F]

Дима Турков, дополнил ответ.

[Дима Паутов]

0xD34F, в том то и дело, что это диапазон цен. И цена должна точно совпадать с указанной! Иначе, работа фильтра будет не точной

[0xD34F]

Дима Турков, точную цену можно вбить руками в поле ввода. А с помощью слайдера, не только этого, но и любого другого, повторюсь, точно выставить значение на таком интервале невозможно. Слайдер же в ширину порядка ста пикселей, а возможных значений - на два-три порядка больше.

[Дима Паутов]

Это то ясно, но всё же, хочется, что бы перетаскивая слайдер, он давал значение до единицы! Ну ладно, я уже запилил себе свой компонент, на основе noUISlider

[0xD34F]

Дима Турков, ещё хочется жить тысячу лет, уметь летать и телепортироваться, и чтобы всё было хорошо. Лучше забудьте про "значение до единицы" - какой смысл хотеть невозможного?

[Дима Паутов]

0xD34F, без использования vue js и elementUI slider всегда использовал noUISlider, который так и работает по умолчанию. И как-то меня не мучало, что у него шаг равен единице. Так и хотелось, что бы было. А тут, это больше выглядит как костыль, т.к. под капотом у elementUI slider идиотская надстройка, которая выводит деления, которые равны максимальному значению у диапазона. И в любом случае, этот цикл работает и выводит элементы. Этого я и хочу избежать, т.к. такие слайдеров может в фильтре быть с десяток. Лаги будут обеспечены