CODEWITHSUNDEEP
cssslider
wagnerdelima
wagnerdelima

Reputation: 360

Bubble as slider in input range

I've been struggling to make a bubble as a slider to an input type range, with css.

This is the thing I must do: image

My code up to now:

    <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;

}

I've been checking through the internet and I've found many solutions. But when it comes of making the slider as the bubble, no help!! Any one could help me? Thanks.

Upvotes: 1

Views: 3965

Answers (1)

Tobi Obeck
Tobi Obeck

Reputation: 2317

I created a quick example with a red div box as a slider bubble.

For the shape of a bubble or a pin I would suggest to put a transparent .png image as the background of the div or use a .svg Vector graphic. You could also search for pin icons as a font.

When the mouse is pressed down the bubble is moved to the mouse position minus half the width of the bubble. Thereby the bubble is centered to the mouse coordinates.

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

Then the current value of the slider is put into the bubble 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

Upvotes: 3

Related Questions