Adjustable scrolling bar

Adjustable scrolling bar.markdown

Adjustable scrolling bar

By using the slider below, you can adjust the amount that the progress bar fills. This code could be used to add a graphical interface for input amounts.

A Pen by Mary Knize on CodePen.

License.

index.html

<div class="wrapper">

  <div class="barclip">
    <div class="bar stripes"></div>
    <div class="gloss"></div>
  </div>

  <div class="scrollbar">
    <div class="scroll"></div>
  </div>

  <div class="amount">0%</div>

</div>

script.js

 $(document).ready(function() {
   var scrollStart = ($(window).width() - $('.scrollbar').width()) / 2;
   $('.scroll').draggable({
     axis: 'x',
     containment: 'parent',
     drag: function() {
       var dragAmt = $('.scroll').position().left - scrollStart;
       var dragPercent = dragAmt * 0.168;
       $('.amount').text(Math.round(dragPercent) + '%');
     },
     stop: function() {
       var dragAmt = $('.scroll').position().left - (scrollStart + 696);
       $('.bar').animate({
         'margin-left': dragAmt
       }, 700, 'easeOutCubic');

     }
   });
 });

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Sail|Open+Sans|Open+Sans+Condensed:300);
body {
  display: block;
  text-align: center;
}

div {
  display: inline-block;
}

.wrapper {
  width: 620px;
  height: 300px;
  margin: 50px auto;
}

.barclip {
  width: 606px;
  height: 36px;
  border-radius: 50px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}

.stripes {
  background: -webkit-linear-gradient(45deg, #ff9999 25%, #ffcccc 25%, #ffcccc 50%, #ff9999 50%, #ff9999 75%, #ffcccc 75%);
  background: -moz-linear-gradient(45deg, #ff9999 25%, #ffcccc 25%, #ffcccc 50%, #ff9999 50%, #ff9999 75%, #ffcccc 75%);
  background: -o-linear-gradient(45deg, #ff9999 25%, #ffcccc 25%, #ffcccc 50%, #ff9999 50%, #ff9999 75%, #ffcccc 75%);
  background: -ms-linear-gradient(45deg, #ff9999 25%, #ffcccc 25%, #ffcccc 50%, #ff9999 50%, #ff9999 75%, #ffcccc 75%);
  background: linear-gradient(45deg, #ff9999 25%, #ffcccc 25%, #ffcccc 50%, #ff9999 50%, #ff9999 75%, #ffcccc 75%);
}

.bar {
  width: 700px;
  height: 70px;
  float: left;
  display: block;
  -webkit-background-size: 50px 50px;
  -moz-background-size: 50px 50px;
  background-size: 50px 50px;
  margin-left: -696px;
  z-index: 1;
}

.gloss {
  width: 600px;
  height: 30px;
  border-style: ridge;
  border-color: #ccc;
  border-width: 3px;
  border-radius: 40px;
  z-index: 100;
  display: block;
  float: left;
  margin-top: -70px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(255, 255, 255, 0.4) 100%);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(255, 255, 255, 0.4) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(255, 255, 255, 0.4) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(255, 255, 255, 0.4) 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(255, 255, 255, 0.4) 100%);
  -webkit-box-shadow: inset 0 0 10px rgba(40, 0, 0, 0.5);
  box-shadow: inset 0 0 10px rgba(40, 0, 0, 0.5);
}

.scrollbar {
  width: 620px;
  height: 8px;
  margin-top: 30px;
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.scroll {
  width: 25px;
  height: 25px;
  background-color: #fff;
  float: left;
  top: -9px;
  border-radius: 15px;
  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.scroll.ui-draggable-dragging {
  background-color: #eee;
}

.amount {
  font-family: 'Open Sans Condensed', Verdana, serif;
  font-size: 3em;
  margin-top: 10px;
}