显示输入范围光标的价格

Question

您好我发现<input type="range">的这个练习"button"

的价格

这是一个site，而original demo这是slider of Jquery

的精心设计

我改变它以查看一个输入范围。

这是我的exercise JSBIN。

很好，但我喜欢光标是一个矩形。

---

我知道我使用delete：.ui-corner-all { border-radius: 20px; }或指定的类更改 css 。并添加define label{width:1 px;}）

---

问题是其他问题：

当鼠标在光标上时，显示价格（在光标上），当光标移动时和光标移出时相同，价格不显示。

这是我想要的范围的图像。

Answer 1

如果我理解正确，那么添加到您的代码中的这些CSS代码段可以帮助您。

在滑块手柄上方绘制标签：

.ui-slider a label {
  position: relative;
  color: black;
  top: -20px;
}

使滑块呈现方形：

.ui-corner-all {
  border-radius: 0 !important;
}

更改手柄的宽度：

.ui-slider-handle {
  width: 30px !important;
}

Answer 2

您可以通过添加以下代码来实现它。您需要在锚标记中添加id='handle'才能生效。

#handle{
  width: 2em;
  height: 2em; /* Just to make the handle come out of the slider and look bigger */
  top: -0.7em; /* For positioning the slider since we increased the height */
  text-decoration: none; /* Not really required */
}
#handle label{ 
  position: relative;
  line-height: 100%;
  margin-top: 8px;
  display: none; /* To hide the label value when slider is not hovered, default state */
}
#handle:hover label{ 
  display: block; /* To display the label when handle is hovered on */
  top: -35px; /* To position the label with the value in relation to the handle */
}

Demo