jquery 滑块

jQuery 滑块实现方法

使用 jQuery 实现滑块功能可以通过插件或自定义代码完成。以下是几种常见方法：

使用 jQuery UI Slider jQuery UI 提供了内置的滑块组件，易于实现且功能丰富。

$(function() {
  $("#slider").slider({
    range: "min",
    value: 50,
    min: 0,
    max: 100,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
    }
  });
  $("#amount").val($("#slider").slider("value"));
});

对应的 HTML 结构：

<div id="slider"></div>
<input type="text" id="amount" readonly>

使用第三方插件（如 ionRangeSlider） ionRangeSlider 提供更丰富的功能和样式选项。

$("#range").ionRangeSlider({
    min: 0,
    max: 100,
    from: 50,
    skin: "round"
});

自定义滑块实现 对于简单需求，可以完全自定义实现：

$(document).ready(function(){
  var slider = $('.slider');
  var handle = $('.handle');
  var isDragging = false;

  handle.mousedown(function() {
    isDragging = true;
  });

  $(document).mousemove(function(e) {
    if(isDragging) {
      var sliderOffset = slider.offset().left;
      var newPosition = e.pageX - sliderOffset;

      if(newPosition >=0 && newPosition <= slider.width()) {
        handle.css('left', newPosition);
        $('.progress').width(newPosition);
      }
    }
  }).mouseup(function() {
    isDragging = false;
  });
});

滑块样式定制

通过 CSS 可以自定义滑块外观：

.ui-slider {
  background: #ddd;
  height: 5px;
}

.ui-slider-handle {
  width: 15px;
  height: 15px;
  background: #333;
  border-radius: 50%;
  cursor: pointer;
}

/* 自定义滑块样式示例 */
.custom-slider {
  width: 100%;
  height: 5px;
  background: #eee;
  position: relative;
}

.custom-handle {
  width: 20px;
  height: 20px;
  background: #4285f4;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  cursor: grab;
}

滑块事件处理

常见的事件处理方式：

$("#slider").on("slide", function(event, ui) {
  console.log("当前值: " + ui.value);
});

$("#slider").on("slidechange", function(event, ui) {
  console.log("值改变: " + ui.value);
});

响应式滑块实现

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

function initSlider() {
  if($(window).width() < 768) {
    $("#slider").slider("option", "step", 10);
  } else {
    $("#slider").slider("option", "step", 1);
  }
}

$(window).resize(initSlider);
initSlider();

滑块数值显示

实时显示滑块数值的几种方式：

// 显示在输入框
$("#slider").slider({
  slide: function(event, ui) {
    $("#slider-value").val(ui.value);
  }
});

// 显示在元素内
$("#slider").slider({
  slide: function(event, ui) {
    $(".value-display").text(ui.value);
  }
});

垂直滑块实现

jQuery UI 也支持垂直滑块：

$("#vertical-slider").slider({
  orientation: "vertical",
  range: "min",
  min: 0,
  max: 100,
  value: 60
});