Question

我一直在努力将气泡作为滑块输入到输入类型范围，使用css。

这是我必须做的事情：

我的代码到目前为止：

    <input type="range" min="0" max="100" ng-model="cellphoneSelectedRange">
<output id="rangevalue" ng-bind="cellphoneSelectedRange|percentage"></output>

#rangevalue {

color: white;
font-size: 10px;
text-align: center;
font-family:  Arial, sans-serif;
display: block;
color: #fff;
//margin: 20px 0;
position: relative;
left: 70.5%;
padding: 6px 12px;
border: 1px solid black;

-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222931), color-stop(100%,#181D21));
//
//-webkit-border-radius: 20px;
//-moz-border-radius: 20px;
//border-radius: 20px;
//width: 18px;
//-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
//filter: alpha(opacity=0);
//opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
top: -10px;

}

我一直在通过互联网查看，我找到了很多解决方案。但是当它将滑块设为气泡时，没有任何帮助！任何人都可以帮助我吗？感谢。

Answer 1

我创建了一个快速示例，其中红色div框作为滑块气泡。

对于气泡或别针的形状，我建议将透明的.png图像作为div的背景或使用.svg矢量图形。您还可以搜索图标作为字体。

按下鼠标时，气泡移动到鼠标位置减去气泡宽度的一半。因此，气泡以鼠标坐标为中心。

bubble.style.left = e.clientX-(bubble.offsetWidth/2)+'px';

然后滑块的当前值被放入冒泡div。

var sliderVal = sliderInput.value
bubble.innerHTML = sliderVal;

HTML：

<body onload="init()">
    <input id="sliderInput" type="range" min="0" max="100" ng-model="cellphoneSelectedRange">

    <div id="bubble" style="position: absolute; top: 6px; width: 20px; height:20px; background-color: red;pointer-events: none; opacity: 0;">
    </div>
</body>

JS：

var oldSliderVal = -1;

function init()
{
    var bubble = document.getElementById('bubble');
    var sliderInput = document.getElementById('sliderInput');

    sliderInput.addEventListener('mousemove', moveBubble);
    sliderInput.addEventListener('mousedown', show);
    sliderInput.addEventListener('mouseup', hide);
}   

var show = function(e)
{
    bubble.style.left = e.clientX-(bubble.offsetWidth/2)+'px';  
    bubble.style.opacity = '1';
}

var hide = function()
{
    bubble.style.opacity = '0';
}

var moveBubble = function(e)
{
    if(oldSliderVal !== '0' && oldSliderVal !== '100')
    { 
        bubble.style.left = e.clientX-(bubble.offsetWidth/2)+'px';        
    }
    var sliderVal = sliderInput.value
    bubble.innerHTML = sliderVal;
    oldSliderVal = sliderVal;
}

http://codepen.io/TobiObeck/pen/amJpXE

在输入范围内冒泡作为滑块

1 个答案: