jquery写一个滑块

最新推荐文章于 2024-05-06 10:59:29 发布

猴猴不是猴

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量158

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_56381842/article/details/136044638

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>
  <div id="slider"></div>
  <span id="currentValue">0</span>

  <script>
    $(document).ready(function () {
      $("#slider").slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function (event, ui) {
          $("#currentValue").text(ui.value)
          let sliderId = event.target.id
          let sliderValue = ui.value
          let dataValue = event.target.getAttribute('data-value')
          console.log('滑动的滑块 ID：', sliderId)
          console.log('滑块的当前值：', sliderValue)
          console.log('滑块的 data-value 属性值：', dataValue)
        }
      })
    });
  </script>
</body>

引入的依赖

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

样式

<style>
    #slider {
      width: 200px;
      margin: 20px;
      background-color: brown;
    }
  </style>

样式如下

猴猴不是猴

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery写一个滑块

jquery写一个滑块
复制链接

扫一扫

专栏目录

jquery写一个滑块

“相关推荐”对你有帮助么？