Range 滑块

使用方法

input默认的range类型在各浏览器下形态各异,本框架借助css统一了外观(chrome无法美化进度部分,用户需另写JS控制),可跟普通表单混用。

音量:
音量:
                                 <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">音量:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input type="range"></div>
                                        </div>
                                    </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">音量:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input type="range" disabled></div>
                                        </div>
                                    </div>
                                </div>
                        

通过简单js可控制range游标变化,或在页面输出range的值。

音量:
点击值变成20
音量:
30%
  • <script type='text/javascript'>
        $(document).ready(function () {
            $('#volBtn').click(function () {
                $('#volInput').val("20");
            });
            $('#volOutput').bind('input propertychange', function() {
                $('#volVal').html($(this).val() + '%');
            });
        });
    </script>
                            
  •                                  <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">音量:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><input type="range" id="volInput"></div>
                                            </div>
                                            <a href="###" class="ax-form-btn ax-btn ax-text" id="volBtn">点击值变成20</a>
                                        </div>
                                    </div>
    
    
                                    <div class="ax-break-md"></div>
    
                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">音量:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input"><input type="range" value="30" id="volOutput"></div>
                                            </div>
                                            <span class="ax-form-txt ax-color-ignore" id="volVal">30%</span>
                                        </div>
                                    </div>
                            

range跟其他表单控件一样支持多个尺寸,默认是ax-md(高38px),其他可用ax-xs(高22px),ax-sm(高28px)和ax-lg(高48px)。

音量xs:
音量sm:
音量lg:
                                <div class="ax-form-group ax-xs">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">音量xs:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input type="range"></div>
                                        </div>
                                    </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group ax-sm">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">音量sm:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input type="range"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group ax-lg">
                                    <div class="ax-flex-row">
                                        <div class="ax-form-label">音量lg:</div>
                                        <div class="ax-form-con">
                                            <div class="ax-form-input"><input type="range"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <input type="range" class="ax-xs">
                                <input type="range" class="ax-sm">
                                <input type="range" class="ax-lg">
                        

插件滑块 PLUGIN

使用了第三方插件ion.rangeSlider,该插件在Github很受欢迎,使用简单直接,参数全面,能满足绝大多数场景需求,本框架使用的版本是v2.3.1。API和具体使用方法见其官网ion.rangeSliderGithub

本框架根据插件说明自制了皮肤,修改了原css,参见演示效果。

使用前先引用基础文件。

                            <script src="https://src.axui.cn/src/plugins/rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script>
                            <link href="https://src.axui.cn/src/plugins/rangeSlider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
                                    
默认:
加刻度:
加限制:
两个:
                          $("#slider01").ionRangeSlider({
                            skin: "ax"
                          });
                          $("#slider02").ionRangeSlider({
                            skin: "ax",
                            grid:true,
                           });
                          $("#slider03").ionRangeSlider({
                            skin: "ax",
                            min: 0,
                            max: 1000,
                            from: 500,
                            grid: true,
                            from_min: 250,
                            from_max: 750,
                            from_shadow: true
                          });
                          $("#slider04").ionRangeSlider({
                            skin: "ax",
                            type: "double",
                            min: 0,
                            max: 1000,
                            from: 400,
                            to: 600,
                            drag_interval: true,
                            min_interval: null,
                            max_interval: null
                          });
                        

联动 PLUGIN

与其他input联动。

单个联动:
单个联动:
设定280
两个联动:
两个联动:
~
设定300-400
        var sliderS = $("#slider05"),
            sliderSinputfrom = $("#slider05-from"),
            sliderScase,
            sliderSmin = 0,
            sliderSmax = 1000,
            sliderSfrom = 0;

        sliderS.ionRangeSlider({
            skin: "ax",
            min: sliderSmin,
            max: sliderSmax,
            from: 500,
            onStart: updateS,
            onChange: updateS
        });
        sliderScase = sliderS.data("ionRangeSlider");
        function updateS (data) {
            from = data.from;
            sliderSinputfrom.prop("value", from);
        }

        sliderSinputfrom.on("input", function () {
            var val = $(this).prop("value");
            if (val < sliderSmin || val == sliderSmin) {
                val = sliderSmin;
            } else if (val > sliderSmax || val == sliderSmax) {
                val = sliderSmax;
            }
            sliderScase.update({
                from: val
            });
        });

        $("#sliderSbtn").on("click", function () {
            var val = $(this).attr("data-from");
            sliderSinputfrom.val(val);
            sliderScase.update({
                from: val
        });
        });


        var sliderD = $("#slider06"),
            sliderDinputfrom = $("#slider06-from"),
            sliderDinputto = $("#slider06-to"),
            sliderDcase,
            sliderDmin = 0,
            sliderDmax = 1000,
            sliderDfrom = 0,
            sliderDto = 0;

        sliderD.ionRangeSlider({
            skin: "ax",
            type: "double",
            min: sliderDmin,
            max: sliderDmax,
            from: 100,
            to: 800,
            onStart: updateD,
            onChange: updateD
        });
        sliderDcase = sliderD.data("ionRangeSlider");

        function updateD (data) {
            from = data.from;
            to = data.to;
            sliderDinputfrom.prop("value", from);
            sliderDinputto.prop("value", to);
        }

        sliderDinputfrom.on("input", function () {
            var val = $(this).prop("value");
            if (val < sliderDmin || val == sliderDmin) {
                val = sliderDmin;
            } else if (val > sliderDmax || val == sliderDmax) {
                val = sliderDmax;
            }
            sliderDcase.update({
                from: val
            });
        });

        sliderDinputto.on("input", function () {
            var val = $(this).prop("value");
            if (val < sliderDfrom) {
                val = sliderDfrom;
            } else if (val > sliderDmax) {
                val = sliderDmax;
            }
            sliderDcase.update({
                to: val
            });
        });
        $("#sliderDbtn").on("click", function () {
            var valfrom = $(this).attr("data-from");
            var valto = $(this).attr("data-to");
            sliderDinputfrom.val(valfrom);
            sliderDinputto.val(valto);
            sliderDcase.update({
                from: valfrom,
                to: valto
            });
        });
                        

禁用 PLUGIN

默认是disable:falsedisable:true使用可禁用滑块。

禁用: