javascript - 将动画笑脸添加到范围 slider 旋钮

Question

我正在尝试向范围 slider 的旋钮添加动画笑脸，但我不确定是否有办法做到这一点。

这是我正在使用的:

var emojis = ['😠','😦','😑','😀','😍'];

$("input").mousemove(function(){
	var i = $(this).val();
	$(".emoji").html(emojis[i]);
});

.rate {
	text-align: center;
	width: 200px;
	height: 200px;
	ouline: thin solid lightgray;
}
.emoji {
	font-size: 120px;
	height: 170px;
	line-height: 170px;
}

input {
	cursor: ew-resize;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rate">
     <div class="emoji">😑</div>
     <input type="range" min="0" max="4" step="1">
 </div>

我想要实现的是将笑脸添加到滑动时会改变的旋钮。

Answer 1

嗯，答案是肯定的，你可以添加表情符号，但有很多东西需要注意。

1. 您基本上是在删除所有range input 系统样式并将其替换为您自己的自定义样式。

2. 执行此样式的 CSS 在所有主要浏览器渲染引擎(Webkit、Mozilla、MS)中都是不同的，因此需要大量工作。

3. 因为每个渲染引擎都不同，所以它很可能无法在某些浏览器中正常工作(确保您接受它的失败方式)。

4. 据我所知，您不能将 utf-8 文本添加到 slider 旋钮。因此，您需要每个表情符号的背景图片或 SVG。

从 CSS 的 Angular 来看，这里有一个针对不同浏览器所需的一切示例:

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 7.8px 0;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(48, 113, 169, 0.78);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 27px;
  width: 26px;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(54, 126, 189, 0.78);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: rgba(48, 113, 169, 0.78);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 27px;
  width: 26px;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 11.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: rgba(42, 100, 149, 0.78);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: rgba(48, 113, 169, 0.78);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
  border: 1.8px solid #00001e;
  height: 27px;
  width: 26px;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  height: 11.4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: rgba(48, 113, 169, 0.78);
}
input[type=range]:focus::-ms-fill-upper {
  background: rgba(54, 126, 189, 0.78);
}

<input type="range" />

等我还有几分钟的时间，我会用一些图片编辑这个例子。但基本上我建议将 background-image 添加到 -thumb 伪元素。

最终，您最好构建一个完整的 javascript 解决方案并完全忘记 HTML5 范围输入