一、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.onmousedown=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.left = x-20 + 'px';
    }
};

4、给range设置鼠标移动事件

document.onmousemove=function(){

        //3.1 将div的内容赋值为滑轮的值
    box.innerHTML=range.value;
        //3.2div在滑轮下边展示
    var x = event.clientX;
    box.style.left = x + 'px';
        //3.3 展示的位置 有范围
    if(x<52){
        x=52;
    }if(x>181){
        x=181;
    }
    box.style.left = x-20 + 'px';
};

5、给整个页面绑定鼠标抬起事件

document.onmouseup=function(){
    //4.1展示的值消失
    box.innerHTML="";
    //4.2div消失
    flag=false;
    box.style.display="none";
};