.sliding-scale
.bars
.slider
.knob.knob-transition
.count -
View Compiled
@import "compass/css3";
$bars: 5;
$bars-spacing: .3em;
$bars-height: .3em;
$bars-width: 2em;
$knob-diameter: .6em;
body
{
font-size: 30px;
}
.count
{
position: absolute;
left: $bars-width + $bars-height * 3;
padding: .5em .1em;
color: rgb(49, 167, 210);
font:
{
weight: bold;
family: Verdana, sans-serif;
}
text-transform: uppercase;
&:before
{
content: 'level ';
}
}
.sliding-scale
{
position: relative;
margin-top: 30px;
}
.bars
{
position: absolute;
}
.bar
{
position: relative;
margin-top: $bars-spacing;
height: $bars-height;
width: $bars-width;
cursor: pointer;
@include border-radius(1em);
@include box-shadow(
0 .02em .2em rgba(black, .1) inset,
0 -.02em .2em rgba(black, .1) inset
);
@include background-image(
linear-gradient(top, rgb(186, 187, 188), rgb(230, 230, 230))
);
&:before
{
position: absolute;
top: $bars-height / -2;
height: $bars-height * 2;
width: $bars-width + ($bars-height * 2);
z-index: 1;
content: '';
}
&.active-bar
{
@include box-shadow(
0 -.025em .025em rgba(black, .2),
0 .025em .05em rgba(black, .4)
);
@include background-image(
linear-gradient(top, rgb(35, 211, 255), rgb(34, 143, 181))
);
}
}
.slider
{
$top: .3em;
position: absolute;
top: $top;
left: $bars-width + $bars-height;
width: $bars-height;
height: (($bars-height + $bars-spacing) * $bars) - $top;
@include border-radius(1em);
@include background-image(
linear-gradient(left, rgb(186, 187, 188), rgb(230, 230, 230))
);
}
@for $i from 1 through $bars
{
.level-#{ $i } .knob
{
bottom: -$knob-diameter / 4 + (($i - 1) * ($bars-height + $bars-spacing));
}
}
.knob
{
position: absolute;
bottom: -$knob-diameter / 4;
left: 50%;
margin-left: $knob-diameter / -2;
width: $knob-diameter;
height: $knob-diameter;
cursor: pointer;
cursor: -webkit-grab;
cursor: -moz-grab;
z-index: 2;
@include border-radius($knob-diameter);
@include box-shadow(
0 .025em .1em rgba(black, .2),
0 .07em 0 -.025em rgb(235, 235, 235) inset,
0 0 .05em rgba(black, 0.5)
);
@include background-image(
linear-gradient(left, rgb(204, 204, 204), rgb(229, 229, 229))
);
}
.knob-transition
{
@include transition(bottom 100ms ease-in);
}
View Compiled
bars = 5
$knob = $ '.knob'
$count = $ '.count'
$scale = $ '.sliding-scale'
$bars = $ '.bars'
knobHeight = $knob.height()
sliderHeight = $('.slider').height()
drag = (e) ->
start = parseInt $knob.css('bottom'), 10
min = Math.floor knobHeight / -4
max = sliderHeight - knobHeight
$knob.removeClass 'knob-transition'
documentMouseMove = document.onmousemove
documentMouseUp = document.onmouseup
document.onmousemove = (move) ->
position = start + e.clientY - move.clientY
position = min unless position >= min
position = max unless position <= max
$knob.css 'bottom', position
setLevel Math.floor((position - min) / (max) * (bars - 1)) + 1
document.onmouseup = ->
$knob.addClass('knob-transition').css 'bottom', ''
document.onmousemove = documentMouseMove
document.onmouseup = documentMouseUp
setLevel = (level) ->
return if parseInt($count.text(), 10) is level
$count.text level
$scale.attr('class').split(' ').filter (className) ->
not className.match(/level-\d*/)
$scale.removeClass().addClass("level-#{ level }")
$bars.find('.active-bar').removeClass 'active-bar'
$scale.find(".bar-#{ i }").addClass 'active-bar' for i in [1..level]
for i in [1..bars]
$el = $(document.createElement 'div')
$bars.prepend $el.attr id : "cls-bar-#{ i }", class : 'cls-bar'
setLevel 1
$knob.bind 'mousedown', drag
$bars.bind 'click .bar', (e) ->
l = e.target.id.slice e.target.id.lastIndexOf('-') - e.target.id.length + 1
setLevel l
View Compiled
This Pen doesn't use any external CSS resources.