@ceeed

Как мне установить интервал выбора данных слайдера равным 100?

Я использую библиотеку для слайдера https://nightcatsama.github.io/vue-slider-componen...
Я хочу чтобы слайдер у меня имел шаг выбор в "100", дело в том, что если я ставлю параметр :interval="100", то у меня появляется черная полоса под слайдером и все начинает очень лагать, но данные отстраиваются с верным шагом, если же ставлю :interval="1000" то ничего не лагает, но шаг 1000. В чем может быть проблема?

60e9c74c88b94691652096.png

<teamplate>
          <vue-slider
            v-model="expectedMaxPrice"
            :marks="true"
            :interval="10000"
            :min="minSlider"
            :max="maxSlider"
            @change="changeMaxPrice"
            :enable-cross="false"
          >
          </vue-slider>

</teamplate>
<script>
  data() {
    return {
      value: 0,
      data: ['0', '10000', '20000', '30000', '40000', '50000', '60000','70000','80000','90000','100000','110000','120000','130000','140000','150000'],
      futHedgeFlag_down: false,
      futHedgeFlag_top: false,
      subDirectionFlag: false,
      saveDirection: false,
      minSlider: 0,
      maxSlider: 150000,
      stepSlider: 100,
      msg: "waiting",
      underlyingList: ["BTC", "ETH"],
      directionOptions: ["Up", "Down"],
      maturityList: [],
      expectedMinPrice: 0,
      expectedMaxPrice: 0,

      defolt_expectedMinPrice: [0, 150000],
      defolt_expectedMaxPrice: [0, 150000],

      sliderLabelsBtc: [0, 2000, 3000],
      sliderLabelsEth: [0, 150, 400],

      tableData: null,

      underlyingChoice: [],
      selectedCoin: null,
      selectedDate: null,
      selectedDirection: null,

      coinAmount: 0,
      description: "Description from DATA",
      chartData: {},
      max_slippage: null,
      name: "null",
      title: "Chart title from DATA",
      sliderLabels: [],

      timerId: null,
      intervalTimerId: null
    };
  },
methods: {
    async getMaturity(underlying) {
      this.maturityList = await this.getMaturity_actions(underlying);
      const result = await this.getStrikes_actions(this.selectedCoin); //BTC-ETH
      console.log(".main_value", result[this.selectedCoin].main_value);
      console.log("sub_value", result[this.selectedCoin].sub_value);
      this.minSlider = result[this.selectedCoin].min;
      this.maxSlider = result[this.selectedCoin].max;
      this.stepSlider = result[this.selectedCoin].step;
      this.expectedMinPrice = [...result[this.selectedCoin].main_value];
      this.defolt_expectedMinPrice = [...result[this.selectedCoin].main_value];
      this.expectedMaxPrice = [...result[this.selectedCoin].sub_value];
      this.defolt_expectedMaxPrice = [...result[this.selectedCoin].sub_value];
/*       this.setupSliderLabels(); */
      this.selectedDate = null;
      this.coinAmount = 0;
      this.chartData = null;
      this.max_slippage = null;
      this.tableData = null;
      this.selectedDirection = null;
      this.futHedgeFlag_top = false;
      this.futHedgeFlag_down = false;
      this.saveDirection = false;
      this.subDirectionFlag = false;
    },
}
</script>
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
если я ставлю параметр :interval="100", то у меня появляется черная полоса под слайдером и все начинает очень лагать

Разница между максимальным и минимальным доступными значениями 150000. Делим на 100, получаем 1500. Это количество отметок под слайдером. Ширина экрана в пикселях имеет тот же порядок - естественно, все эти 100, 200, ... наслаиваются друг на друга до степени абсолютной неразличимости - отсюда "черная полоса".

Сами отметки представлены тремя div'ами каждая. Изменили значение с 1000 на 10000, например - надо переназначить классы (с последующей перерисовкой) у 27000 элементов. Как думаете, может ли это быть причиной вашего "очень лагать"?

Что делать? - рисовать меньше отметок. Скажем, одну через каждые двадцать тысяч:

methods: {
  marks: v => !(v % 20000),
  ...

<vue-slider
  :marks="marks"
  ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы