HTML表单滑块组

HTML Form Slider Group

本文关键字：表单 HTML      更新时间：2023-09-26

我需要一个Slider Group或类似的东西（我不确定官方名称）。

本质上，有多个滑块，它们加起来都达到100%。增加一个，就会减少其他的。

我知道这个问题已经解决了，正如我在Humble Bundle看到的那样，你可以在那里选择捐款的去向。外面有图书馆做这个吗？

如果没有，我可以使用jQueryUI或其他一些UI框架构建一些东西。

您可以使用jQuery UI滑块轻松完成此操作。下面是您想要研究的javascript的一些伪代码。文档很好地涵盖了事件的工作方式：

API文件：http://api.jqueryui.com/slider/

JSFiddle：https://jsfiddle.net/b54dntrz/

HTML:

    <div id="slider1"></div>
    <br/>
    <div id="slider2"></div>

JavaScript:

$(document).ready(function () {
    $('#slider1').slider({ 
        max: 100,
        slide: function (event, ui) {
            var slider2val = $('#slider2').slider('value');
            if (ui.value + slider2val > 100) {
                $('#slider2').slider({
                    value: slider2val - 1
                });
            }
        }
    });
    $('#slider2').slider({
        max: 100,
        slide: function (event, ui) {
            var slider1val = $('#slider1').slider('value');
            if (ui.value + slider1val > 100) {
                $('#slider1').slider({
                    value: slider1val - 1
                });
            }
        },
    });
})
相关文章：