在輸入範圍內作爲滑塊的氣泡

我一直在努力使用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;

}

我一直在通過互聯網檢查我發現很多解決方案。但是當把滑塊作爲泡泡時，沒有幫助！任何人都可以幫助我？謝謝。

來源

2016-09-23 wagnerdelima

發表您的[MCVE]你的問題，請 – j08691

發佈。謝謝！！！ – wagnerdelima

我創建了一個紅色的div框作爲滑塊泡泡的快速示例。

對於一個氣泡或針的形狀，我會建議把一個透明的.png圖像作爲div的背景或使用.svg矢量圖形。您還可以搜索引腳圖標作爲字體。

當鼠標按下時，氣泡移動到鼠標位置減去氣泡寬度的一半。從而氣泡居中鼠標座標。

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

然後將滑塊的當前值放入氣泡格中。

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

來源

2016-09-23 23:21:39

在輸入範圍內作爲滑塊的氣泡

回答

相關問題