title: How to control a track using a volume slider?
body: <p>I'm using this volume slider:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// HTML/CSS/JS Volume slider inspired by the Vimeo player
  
  $(document).ready(function () {
      var $input = $('#sliderInput'),
          steps = $input.attr('data-steps');
      defValue = $input.attr('value'),
      $slider = $("&lt;div class='vslider'&gt;&lt;div class='vslider_bar'&gt;&lt;/div&gt;&lt;ul class='vslider_sticks'&gt;&lt;/div&gt;").appendTo($input.parent());
      $input.hide();
  
      for (var i = 0; i &lt; steps; i++) {
          var $stick = $('&lt;li&gt;&lt;div class="vslider_stick"a&gt;&lt;/div&gt;&lt;/li&gt;').appendTo($slider.find('.vslider_sticks'));
          $stick.on('mouseenter', function () {
              $(this).addClass('active');
          }).on('mouseleave', function () {
              $(this).removeClass('active');
          });
      }
  
      var startDrag = function (event) {
          renderUI(getPercent(event));
          $(document.body).on('mousemove', onDrag);
          $(document.body).on('mouseup', stopDrag);
      },
      stopDrag = function (event) {
          $(document.body).off('mouseup', stopDrag);
          $(document.body).off('mousemove', onDrag);
      },
      onDrag = function (event) {
          renderUI(getPercent(event));
      };
  
      renderUI = function (percent) {
          var index = Math.round(percent * steps);
          index = index &lt; steps ? index : steps;
  
          $('.vslider_sticks &gt; li').find('div').css('opacity', 0);
  
          for (var i = 0; i &lt; index; i++) {
              $('.vslider_sticks &gt; li:eq(' + i + ')').find('div').css('opacity', 1);
          }
      };
      renderUI(defValue);
  
      getPercent = function (event) {
          var percent = (event.pageX - $slider.offset().left) / $('.vslider_sticks').width();
          percent = percent &gt;= 0 ? percent : 0;
          percent = percent &lt;= 1 ? percent : 1;
          return percent;
      };
  
      $slider.on('mousedown', startDrag);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background: #eee;
  }
  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -18px;
      margin-left: -23px;
  }
  .vslider {
      position: relative;
      display: inline-block;
      height: 36px;
  }
  .vslider * {
      -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none;
  user-select: none;
  }
  .vslider_sticks {
      position: relative;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      display: block;
  }
  .vslider_sticks &gt; li {
      position: relative;
      text-indent: -99999px;
      width: 5px;
      margin-right: 3px;
      height: 90%;
      top: 10%;
      float: left;
      display: inline-block;
      background: rgba(0, 0, 0, 0.1);
    
      -webkit-transition: height 60ms ease-out, top 60ms ease-out;
      -moz-transition: height 60ms ease-out, top 60ms ease-out;
      -ms-transition: height 60ms ease-out, top 60ms ease-out;
      -o-transition: height 60ms ease-out, top 60ms ease-out;
      transition: height 60ms ease-out, top 60ms ease-out;
  }
  .vslider_sticks &gt; li:last-child {
      margin-right: 0;
  }
  .vslider_sticks &gt; li.active {
      height: 100%;
      top: 0;
  }
  .vslider_stick {
      width: 100%;
      height: 100%;
      position: relative;
      top: 0;
      left: 0;
      background: #d41700;
      opacity: 1;
    
      -webkit-transition: opacity 50ms ease-out;
      -moz-transition: opacity 50ms ease-out;
      -o-transition: opacity 50ms ease-out;
      -ms-transition: opacity 50ms ease-out;
      transition: opacity 50ms ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;input type="range" value="0.6" data-steps="8" id="sliderInput" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do you link it to a track? I'm not sure where to place the variable (or what other editing needs to be done)</p>