【day12】jQuery范围选择插件jRange

最新推荐文章于 2021-06-03 04:14:12 发布

泠鸢秋绘

最新推荐文章于 2021-06-03 04:14:12 发布

阅读量129

点赞数

分类专栏： java前端文章标签： jquery

本文链接：https://blog.csdn.net/m0_46953020/article/details/115491082

版权

java前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用jQuery插件jRange创建一个滑块，并实现了从0到预设最大值的滑动选择。滑动过程中，分数会根据滑块的改变实时更新。回调函数中处理了滑块的增减操作，动态计算并显示当前得分。博客内容涉及到前端交互和数据处理。

摘要由CSDN通过智能技术生成

在这里插入图片描述

实例

<input type="hidden" class="single-slider0" value="0"/>

slider_max0是我提前设置好的最大值

  $('.single-slider0').jRange({
        from: 0,
        to: slider_max0,
        step: 1,
        scale: [0, slider_max0],
        format: '%s',
        width: 310,
        showLabels: true,
        showScale: true,
        onstatechange: function (value) {//回调函数
            value = parseInt(value);//字符串转数字
            slider_now0 = value;
            if (slider_before0 == 0) {
                score += value;
            } else if (slider_before0 != 0) {
                if (slider_now0 > slider_before0) {
                    score += (slider_now0 - slider_before0);
                } else if (slider_now0 < slider_before0) {
                    score -= (slider_before0 - slider_now0);
                }
            }
            slider_before0 = value;
            $("#TOTAL_SCORE").html(score);
        }
    });

原文地址