jQuery UI 滑块类选项

jQuery UI 是一组基于 jQuery 的用户界面交互、特效、小部件和主题的一套软件库。其中，滑块类选项是其中之一。

滑块类选项的作用

滑块类选项可以让用户在一系列值中进行选择，通过滑块的位置来表达选择的值。滑块类选项可以用于音量调节、亮度调节等场景。

滑块类选项的用法

在 HTML 中，需要引入 jQuery UI 库和对应的 CSS 文件。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

然后，就可以在 HTML 中添加滑块了。

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

在 JavaScript 中，需要通过 slider() 方法来初始化滑块。

$( "#slider" ).slider();

默认情况下，滑块的值范围是从 0 到 100，可以通过 min 和 max 属性来设置。

$( "#slider" ).slider({
  min: 0,
  max: 10
});

滑块的当前值可以通过 value 属性来获取和设置。

$( "#slider" ).slider( "value", 5 );
var value = $( "#slider" ).slider( "value" );

滑块的滑动事件可以通过 slide 和 stop 事件来监听。

$( "#slider" ).on( "slide", function( event, ui ) {
  console.log( ui.value );
});
$( "#slider" ).on( "stop", function( event, ui ) {
  console.log( ui.value );
});

滑块类选项的样式

滑块类选项的样式可以通过 CSS 来自定义。

.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 100%;
}
.ui-slider-horizontal {
  height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-vertical {
  width: .8em;
  height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-top: -.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

滑块类选项的主题

滑块类选项的主题可以通过添加对应的 class 来实现。jQuery UI 提供了多个主题，如 ui-lightness、ui-darkness 等。

<div id="slider" class="ui-lightness"></div>
<div id="slider" class="ui-darkness"></div>

示例代码

HTML 代码：

<div id="slider" class="ui-lightness"></div>
<p>当前值：<span id="value">0</span></p>

JavaScript 代码：

$( "#slider" ).slider({
  min: 0,
  max: 10,
  value: 0,
  slide: function( event, ui ) {
    $( "#value" ).text( ui.value );
  },
  stop: function( event, ui ) {
    console.log( ui.value );
  }
});

CSS 代码：

.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 1px rgba( 0, 0, 0, .2 );
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 100%;
  border-radius: 2px;
  background-color: #00bcd4;
}
.ui-slider-horizontal {
  height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
  transform: translateY( -50% );
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

效果图：