入力範囲のスライダーとしてのバブル

バブルを入力タイプ範囲のスライダーとして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';

次に、スライダの現在の値がバブル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

出典

2016-09-23 23:21:39

入力範囲のスライダーとしてのバブル

答えて

関連する問題