当前位置：首页 > jquery

jquery 滑块

2026-01-13 15:00:46jquery

jQuery 滑块实现方法

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

使用 jQuery UI Slider

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.min.js"></script>

<div id="slider"></div>

$(function() {
  $("#slider").slider({
    range: "min",
    min: 0,
    max: 100,
    value: 50,
    slide: function(event, ui) {
      console.log("当前值: " + ui.value);
    }
  });
});

自定义 jQuery 滑块

如果需要更轻量级的解决方案，可以手动实现：

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

.slider-container {
  width: 300px;
  height: 5px;
  background: #ddd;
  position: relative;
}

.slider-thumb {
  width: 15px;
  height: 15px;
  background: #4CAF50;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  cursor: pointer;
}

$(document).ready(function() {
  $(".slider-thumb").draggable({
    axis: "x",
    containment: "parent",
    drag: function() {
      var position = $(this).position();
      var percent = (position.left / 285) * 100;
      console.log(Math.round(percent) + "%");
    }
  });
});

响应式滑块实现

确保滑块在不同设备上正常工作：

function initSlider() {
  var containerWidth = $(".slider-container").width();
  $(".slider-thumb").css("left", containerWidth / 2);

  $(window).resize(function() {
    containerWidth = $(".slider-container").width();
  });
}

initSlider();

滑块事件处理

添加值变化时的回调处理：

$("#slider").on("slidechange", function(event, ui) {
  $("#slider-value").text(ui.value);
});

双向范围滑块

实现选择范围的滑块：

$("#range-slider").slider({
  range: true,
  min: 0,
  max: 500,
  values: [75, 300],
  slide: function(event, ui) {
    $("#min-value").text(ui.values[0]);
    $("#max-value").text(ui.values[1]);
  }
});