Question

我试图在CSS中为滑块绘制一个“中心”部分，但遇到了麻烦。这是我的目标的无样式样机：centerslider.png

我试图走出CSS并手动将div定位在滑块上，但是后来我意识到我希望div位于滑块轨道上方但位于可移动光标之下。单靠z-index我无法实现这一目标。

我还尝试在可运行轨道上使用“ before”和“ after”事件，以便可以从那里添加离散内容。一旦我得知必须使用inline-block，这在某种程度上是可行的，但是我再一次无法使z-index正常播放，并且始终在可移动光标上。

在两种情况下，我显然都没有达到我想要的重叠行为，但是也值得注意的是，我无法使任何行为“干净”地表现，在这里我可以使用现有滑块的坐标参考框架放置中间-bar（类似“宽：2％；左：49％”的位置）。

在某些示例中，我确实看到了类似的功能，但是由于其他原因，它们过于复杂，我很难从它们中收集到很多东西。如果有人可以将我指向一种或多种资源，或者描述实现这一功能所需的最低限度的基本要素，那么这将有助于增进我对CSS的个人理解。我不反对学习，但我认为至少需要在这里指出正确的方向。

Answer 1

这是您想要的吗？用position:absolute对齐

.slidecontainer .fa-square {
position:absolute;
top:10px;
left:50px;
}

.slider {
  -webkit-appearance: none;
  height: 8px;
  background: #d3d3d3;
  outline: none;
  border-radius: 5px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 5px;
  position:relative;
  z-index: 2
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <i class="fa fa-square"></i>
</div>

使用CSS将图形插入滑块的中心

1 个答案: