.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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js