Question

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

下面是我的示例代码。

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 +

我在角度5中使用ng-nouislider。是否有解决方案来区分最小值（从侧面）和最大值（从侧面）？

谢谢

Answer 1

您的方法非常接近，您只需要进行一些调整即可。

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

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

1 个答案: