如何在 nouislider 中为最小范围（从）和最大范围（到）设置不同的范围？答案

【问题标题】：How to set different range for minimum range (from) and maximum range (to) in nouislider?如何在 nouislider 中为最小范围（从）和最大范围（到）设置不同的范围？
【发布时间】：2019-03-14 14:29:53
【问题描述】：

我需要为最小和最大边设置不同的自定义范围

下面是我的示例代码。

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+

我在 Angular 5 中使用 ng-nouislider。是否有任何解决方案来区分最小值（从侧面）和最大值（到侧面）的范围？

谢谢

【问题讨论】：

“左右两侧”是什么意思？
@Lg102，我的意思是“到”和“从”滑动按钮。
@Lg102，我更新了问题详情

标签： jquery angular jquery-ui nouislider

【解决方案1】：

你的方法非常接近，你只需要一些调整。

由于两个跨度都有 14 个值，请将滑块范围设置为 0 ... 13
不要将格式化程序传递给 tooltips 选项，而是将其传递给 format 选项，以便它适用于整个滑块
提供两种不同的格式化程序，每个句柄一个，将值 0 ... 13 映射到您想要的值

【讨论】：