Javascript JS滑块工具提示

我有一个带有弹出窗口的滑块，显示滑块的当前值。 但我希望它仅在单击滑块时出现，而在不单击时消失 有办法吗？ 下面是我的css js和html代码

html:

谢谢你的帮助

您可以添加到css中：

output
{
    display:none
}
input:hover + output
{
    display:block;
}

更新 单击时显示工具提示：

input:active+ output
{
    display:block;
}

---

当我删除rangeHover{display:block；并添加您的代码时，它会工作。非常感谢

output { 
  position: absolute;
  background-image: linear-gradient(#FAFAD2, #FAFAD2);
  width: 30px; 
  height: 15px; 
  text-align: center; 
  color: black; 
  border-radius: 5px; 
  display: block;  
  bottom: 120%;
  margin-top:5000px;
  font-size:11px;
  left: 100%;
}
output:after { 
  content: "";
  position: absolute; 
  width: 0px;
  height: 0px;
  border-top: 10px solid #FAFAD2;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 100%;
  margin-left: -26px;
  margin-top: -1px;
}
#rangeHover{ 
display: block;
position: relative; 
margin: -50px; 
padding-right:10px;
padding-left:10px;
}

output
{
    display:none
}
input:hover + output
{
    display:block;
}

input:active+ output
{
    display:block;
}