范围滑块，用于更改轨道上方对齐圆的直径并使对齐的图像显示在下方

Range slider that changes an aligned circle's diameter above track and makes aligned images appear below

本文关键字：对齐 在下方 显示 图像 用于 方对齐 轨道 范围      更新时间：2023-09-26

我有一个巨大的任务要完成（对于新手嘿嘿）。

我想制作一个滑块来做一些事情：

  1. 滑块是水平的，会导致移动手柄上方的圆圈大小增大和减小。此圆圈对齐并移动到手柄的正上方。
  2. 其次，移动手柄还会导致文本和图像出现在其下方。

例如

手柄将旋转到第一个点，并在其上方显示一个直径为 1/2 英寸的圆，在其下方显示"1/2 或一半"字样以及直径为 1/2 的工具的图像。手柄将在轨道上的下一个点上做同样的事情，但直径为 3/4 英寸，并且可能在下面显示 2-3 张图像，而不仅仅是一张。

这些尺寸是假设的，但表明我的范围不是常规的。我知道 DragDealer 和 Ion.Range.Slider，但是当我希望滑块同时影响滑块上方和下方对齐的多个变量时，它们似乎一次更改一个变量。

咆哮完成。 :D

使用滑块的slide方法，如 http://jqueryui.com/slider/#steps

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

示例函数设置 <input type="text" id="amount"></input> 元素的值，但您可以在该函数中根据需要执行任意数量的操作。

这个想法引起了我的兴趣，所以我拼凑了一个jsfidd来演示

你可以像Joe说的那样使用jQuery库。它很受欢迎，并被许多网站证明。

你也可以用纯javascript创建自己的滑块。http://jsfiddle.net/o40w0492/1/

使用侦听器响应滑块中的更改：

bestSliderEver = document.createElement('input');
function onSliderChange() {
    // Do some really crazy stuff here when the slider changes value.
    // The value of the slider now is bestSliderEver.value
}
bestSliderEver.addEventListener(
    'input', onSliderChange, false);
document.body.append(bestSliderEver);
相关文章：