有没有简单的JavaScript滑块？
在前端开发中，滑块是一个相当常见的UI组件。它可以让用户通过滑动来选择一个数值范围，从而实现一些交互效果。事实上，在JavaScript中创建一个简单的滑块也并不难。
HTML
首先，我们需要一个HTML元素作为滑块的容器，以及两个用于显示当前数值的<span>元素。代码如下：
---- ------------ ---- ---------------- ------ ----- ------------------
其中，<div>元素为滑块的主体部分，<div id="knob">则为滑块的拖动按钮。而<span>元素则用于显示当前选中的数值。
CSS
接下来，我们需要对滑块进行样式设置。这里我们使用CSS来实现。
------- - ------ ------ ------- ----- ----------------- ----- --------- --------- - ----- - ------ ----- ------- ----- ----------------- ----- -------------- ---- --------- --------- ---- ----- ----- -- ------- -------- - ------ - -------- ------------- ------------ ----- -
以上代码中，我们给滑块和滑块按钮分别设定了样式，同时还设置了数值显示框的样式。
JavaScript
最后，我们来实现滑块的拖动功能。具体思路是：当鼠标按下时，监听鼠标移动事件，根据鼠标的位置计算出滑块按钮应该移动到的位置；当鼠标抬起时，取消鼠标移动事件的监听。
--- ---- - --------------------------------
--- ------ - ----------------------------------
--- ----- - ---------------------------------
--- -------- - ------
---------------------------------- ----------- -
-------- - -----
---
-------------------------------------- ----------- -
-- ---------- -
--- ---- - --------- - ----------------- - ---------------- - --
-- ----- - -- -
---- - --
- ---- -- ----- - ------------------ - ----------------- -
---- - ------------------ - -----------------
-
--------------- - ---- - -----
--- ------- - ---- - ------------------- - ------------------
--- --- - ------- - -----
--------------- - ----------------
-
---
------------------------------------ ----------- -
-------- - ------
---在以上代码中，我们声明了三个变量：knob代表滑块按钮，slider代表滑块容器，value代表数值显示框。我们还声明了一个dragging标志位，用于判断当前是否正在拖拽滑块。
当用户按下滑块按钮时，我们将dragging设置为true。此后，我们监听整个文档的鼠标移动事件。如果dragging为true，则说明用户正在拖拽滑块，这时我们计算出滑块应该移动到的位置，并将其设置在knob.style.left属性中。
同时，我们还需要根据滑块的位置计算出当前选中的数值，并将其显示在value元素中。
当用户抬起鼠标时，我们将dragging设置为false，以取消对鼠标移动事件的监听。
示例代码
最终，我们可以将以上三段代码组合起来，得到完整的示例代码如下：
--------- -----
----- ----------
------
----- ----------------
------------- ------------
-------
------- -
------ ------
------- -----
-----------------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------