将动画笑脸添加到范围滑块旋钮

Question

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

这是我正在使用的：

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. 在所有主要的浏览器渲染引擎（Webkit、Mozilla、MS）中，实现这种样式的 CSS 都不同，所以工作量很大。

3. 由于每个渲染引擎都不同，因此它很有可能在某些浏览器中无法正常工作（请确保您对它的失败情况感到满意）。

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

下面是一个从 CSS 角度为不同浏览器所需的一切示例：

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" />

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

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