Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by mccannf

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-slider/css/bootstrap.css">
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-slider/css/slider.css">
<script src="http://www.eyecon.ro/bootstrap-slider/js/bootstrap-slider.js"></script>
<input type="text" class="sliderMaster slider-horizontal" id="sl1" name="q12" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">


<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">


<input type="text" class="sliderMaster slider-horizontal" id="sl3" name="q3" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">

    <button id="getVal" class="btn">Get Values</button>

CSS

.slider {
    margin: 40px 100px 10px 20px;
}

JavaScript

$(function(){
    $('#sl1').slider({
          formater: function(value) {
            return 'Current value: '+value;
          }
    });
    $('#sl2').slider({
          formater: function(value) {
            return 'Current value: '+value;
          }
    });
    $('#sl3').slider({
          formater: function(value) {
            return 'Current value: '+value;
          }
    });
    $("#getVal").click(function() {
          console.log("Value 1 = "+$("#sl1").data('slider').getValue());
          console.log("Value 2 = "+$("#sl2").data('slider').getValue());
          console.log("Value 3 = "+$("#sl3").data('slider').getValue());    
    });
 });