当前位置：首页 > jquery

jquery 滑块

2026-03-02 09:26:24jquery

jQuery 滑块实现方法

使用 jQuery 创建滑块可以通过多种方式实现，包括使用原生 jQuery 或结合插件（如 jQuery UI）。以下是几种常见方法：

使用 jQuery UI Slider

jQuery UI 提供了内置的滑块组件，功能丰富且易于定制。

<!-- 引入 jQuery 和 jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- HTML 结构 -->
<div id="slider"></div>

<!-- JavaScript 初始化 -->
<script>
$(function() {
  $("#slider").slider({
    range: "min",
    min: 0,
    max: 100,
    value: 50,
    slide: function(event, ui) {
      console.log("当前值: " + ui.value);
    }
  });
});
</script>

自定义滑块实现

如果需要轻量级自定义滑块，可以通过监听鼠标事件实现：

<div class="custom-slider">
  <div class="slider-track"></div>
  <div class="slider-thumb"></div>
</div>

<style>
.custom-slider {
  width: 300px;
  height: 5px;
  background: #ddd;
  position: relative;
}
.slider-thumb {
  width: 15px;
  height: 15px;
  background: #3498db;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: 0;
  cursor: pointer;
}
</style>

<script>
$(document).ready(function() {
  const $thumb = $(".slider-thumb");
  const $track = $(".custom-slider");
  let isDragging = false;

  $thumb.on("mousedown", function(e) {
    isDragging = true;
  });

  $(document).on("mousemove", function(e) {
    if (!isDragging) return;
    const trackWidth = $track.width();
    const offset = e.pageX - $track.offset().left;
    const percent = Math.min(Math.max(offset / trackWidth, 0), 1);

    $thumb.css("left", percent * 100 + "%");
    console.log("当前值: " + Math.round(percent * 100));
  });

  $(document).on("mouseup", function() {
    isDragging = false;
  });
});
</script>

使用第三方插件（如 ionRangeSlider）

对于更高级的滑块需求，可以考虑专用插件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

<input type="text" id="range-slider" />

<script>
$("#range-slider").ionRangeSlider({
  min: 0,
  max: 100,
  from: 50,
  skin: "round",
  onChange: function(data) {
    console.log("当前值: " + data.from);
  }
});
</script>