Как установить другой диапазон для минимального диапазона (от) и максимального диапазона (до) в nouislider? - PullRequest
Новая
       12

Как установить другой диапазон для минимального диапазона (от) и максимального диапазона (до) в nouislider?

0 голосов
/ 26 февраля 2019

Мне нужно установить различные пользовательские диапазоны для минимальной и максимальной сторон.

Ниже приведен пример кода. 

rangeConfig: any = {
        behaviour: 'drag',
        connect: true,
        snap: true,
        range: {
            min: 2,
            '3.33%':5,
            '6.66%':6,
            '9.99%':8,
            '13.32%':9,
            '16.65%':11,
            '19.98%':12,
            '23.31%':14,
            '26.64%':15,
            '29.97%':17, etc..
            max:100
        },
        tooltips: [new RangeFormatter, new RangeFormatter],
    };

export class RangeFormatter implements NouiFormatter {
        rangeToFormats: any = {2:2, 6:6, 9:9, 12:12, 15:15, 18:18, 21:21, 25:25, 30:30, 35:35, 40:40, 45:45, 50:50, 55:55, 100:'65+'};
        rangeFromFormats: any = {5:5, 8:8, 11:11, 14:14, 17:17, 20:20, 24:24, 29:29, 34:34, 39:39, 44:44, 49:49, 54:54, 64:64, 100:'65+'};
        to(value: number): string {
            return this.rangeToFormats[value];
        }

        from(value: string): number {
            return this.rangeFromFormats[value];
        }
    }

Нам нужен ползунок с левой ручкой ползунка, который можно установить на любойиз низких значений : 2, 6, 9, 12, 15, 18, 21, 25, 30, 35, 40, 45, 50, 55, 65 + и правая ручка может быть установлена ​​на любое из высокие значения: 5, 8, 11, 14, 17, 20, 24, 29, 34, 39, 44, 49, 54, 64, 65 +

Я использую нг-nouislider в угловых 5. Есть ли какое-либо решение для дифференциации диапазонов для минимального (от стороны) и максимального (для стороны)?

Спасибо

1 Ответ

0 голосов
/ 14 марта 2019

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

  • Поскольку оба ваших диапазона имеют 14 значений, установите диапазон ползунка от 0 ... 13
  • Вместо передачидля форматеров в параметре tooltips, передайте его параметру format, чтобы он применялся ко всему ползунку
  • Предоставьте два разных форматера, по одному для каждого дескриптора, которые отображают значения 0 ... 13 на нужные значения
...