如何在更新时获得反应 noUiSlider 最小最大值？(1)

📌 相关文章

📜 如何在更新时获得反应 noUiSlider 最小最大值？(1)

📅 最后修改于: 2023-12-03 15:38:40.431000 🧑 作者: Mango

如何在更新时获得反应 noUiSlider 最小最大值？

noUiSlider 是一个流行的 JavaScript 库，用于创建响应式的可滑动的滑块。在更新滑块时，有时需要获取滑块的最小值和最大值。在本文中，我们将介绍如何在更新时获得反应 noUiSlider 最小最大值。

步骤

首先，创建一个 noUiSlider 实例，用于创建滑块。以下是一个基本的示例代码：

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

接下来，使用 JavaScript 监听器在滑块更新时获取最小值和最大值。以下是代码：

slider.noUiSlider.on('update', function(values, handle) {
    var min = slider.noUiSlider.get('min');
    var max = slider.noUiSlider.get('max');

    console.log('Min: ' + min + ', Max: ' + max);
});

在上面的代码中，我们使用 on('update') 监听器来监听滑块的更新事件。在事件处理函数中，我们使用 get('min') 和 get('max') 方法来获取滑块的最小值和最大值。

完整代码

以下是完整的代码，您可以将其复制粘贴到 HTML 文件中并运行：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>How to Get the Minimum and Maximum Values of a noUiSlider on Update</title>
    
    <!-- 引入 noUiSlider 库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.3/nouislider.min.js"></script>

</head>

<body>
    <div id="slider"></div>

    <script>
        var slider = document.getElementById('slider');

        noUiSlider.create(slider, {
            start: [20, 80],
            connect: true,
            range: {
                'min': 0,
                'max': 100
            }
        });

        slider.noUiSlider.on('update', function(values, handle) {
            var min = slider.noUiSlider.get('min');
            var max = slider.noUiSlider.get('max');

            console.log('Min: ' + min + ', Max: ' + max);
        });
    </script>
</body>

</html>

结论

获得 noUiSlider 最小最大值是在更新滑块时非常有用的操作。借助 get('min') 和 get('max') 方法，您可以轻松地获取滑块的最小值和最大值。