Scenarios Time Slider

by Dumine Stefan Daniel

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/5.3.0/bootstrap-slider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/5.3.0/css/bootstrap-slider.min.css">
<h3> Scenarios Time interval: <span id='interval'>0-12</span></h3>
        <br/>
        <br/>
        <br/>
        <div class="col-md-12">
          <div class="col-md-12">
            <input id="timeFilter" data-slider-min="0" data-slider-max="12" data-slider-step="1" data-slider-value="[0,12]" />
           
            <input class="sr-only sr-only-focusable" id="srGradeLow" value="0">
            <input class="sr-only sr-only-focusable" id="srGradeHigh" value="12">
          </div>
        </div>

JavaScript

$(document).ready(function() {


    Filter();

    function Filter() {
      var slider = $("#timeFilter").slider({
        tooltip: 'always',
        tooltip_split: true,
      });

      $("#timeFilter").mouseup(function() {
    
           $('#interval').text($("#timeFilter").data("slider-value"));
     
        
      });
    }
  });