时间戳

首页 > 解决方案 > 滑块上带有值的输入类型范围

javascript - 滑块上带有值的输入类型范围

问题描述

我有这个输入类型范围属性，并对其进行了一些 CSS 样式设置，但我对它并不是 100% 满意。

.Sslider {
  -webkit-appearance: none;
  width: 75%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.Sslider:hover {
  opacity: 1;
}

.Sslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}

.Sslider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}
<div class="Sslidecontainer" id="Slider"> <span id="Amount"> Amount</span>
    <input type="range" min="5000" max="10000" step="1000" value="5000" class="Sslider" id="myRange">
	<p>Value: <span id="demo"></span></p>
  </div>

我想在我的移动滑块上输出输入值。这一般可能吗？如果是这样，我将如何处理这个问题？

谢谢帮助

标签： javascripthtmlcssinputweb-frontend

解决方案

这是一个使用少量内联 JavaScript 的示例。如果需求变得更复杂，您可以将其重构为外部 JS 文件。

.Sslider {
  -webkit-appearance: none;
  width: 75%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.Sslider:hover {
  opacity: 1;
}

.Sslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}

.Sslider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4BD1A0;
  cursor: pointer;
}
<form oninput="out.value=myRange.value" class="Sslidecontainer" id="Slider">
  <span id="Amount"> Amount</span>
  <input type="range" min="5000" max="10000" step="1000" value="5000" class="Sslider" id="myRange">
	<p>Value: <output name="out" for="myRange" id="demo">5000</output></p>
</form>

推荐阅读