JS 带有文字提示滑块

一、html代码

<span>魅力值</span><input type="range" min="0" max="100" class="in"/>
<div class="box"></div>

二、css代码

<style>
    *{margin: 0;padding: 0;}
    .box{
        height: 30px;
        width: 30px;
        border: 1px solid skyblue;
        border-radius: 5px;
        display: none;
        position: absolute;
    }
</style>

三、js代码

1、获取页面元素

var range=document.querySelector(".in");
var box=document.querySelector(".box");

2、定义开关，判断鼠标是否在box按下

var flag = false;//默认不按下

3、给滑轮设置鼠标按下事件

range.οnmοusedοwn=function(){
    flag=true;
    if(true){
        //2.1将div展示出来
        box.style.display="block";
        //2.2将div的内容赋值为滑轮的值
        box.innerHTML=range.value;
        //2.3 div展示的位置
        var x = event.clientX;
        box.style.