examples/slider.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="../less/bootstrap.css"/>
<script type="text/javascript" src="../js/libs/vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../js/libs/materialbootstrap/slider.js"></script>
<script>
$(function() {
$('.test-slider').materialSlider({
icon : 'mic-speaker',
showInput: true,
max : 10,
min : 0,
color : 'red',
value : 8
});
$('.disabled-slider').materialSlider({
icon : 'mic-speaker',
showInput: true,
max : 10,
min : 0,
color : 'purple',
value : 35,
step : 2,
type : 'selector'
});
$('.range-slider').materialSlider({
icon : 'mic-speaker',
showInput: true,
max : 100,
min : 0,
type : 'range'
});
$('.disabled-range-slider').materialSlider({
icon : 'mic-speaker',
showInput: true,
max : 100,
min : 0,
type : 'range',
value1 : 20,
value2 : 40,
disabled : false
});
$('.test-slider-d').materialSlider({
icon : 'mic-speaker',
showInput: true,
max : 10,
min : 0,
dark : true
});
$('.disabled-slider-d').materialSlider({
icon : 'mic-speaker',
showInput: true,
max : 100,
min : 0,
color : 'purple',
value : 35,
dark : true,
disabled : true
});
});
</script>
</head>
<body>
<div style="padding: 30px;">
<label>Normal Slider</label>
<div class="test-slider"></div>
<label>Selector Slider</label>
<div class="disabled-slider" style="width: 400px;"></div>
<label>Range Slider</label>
<div class="range-slider" ></div>
<label>Range Slider Disabled</label>
<div class="disabled-range-slider" style="width: 400px;"></div>
</div>
<div style="padding: 30px; background-color: #424242">
<label style="color: #9e9e9e">Dark Slider</label>
<div class="test-slider-d" style="width: 400px;"></div>
<label style="color: #9e9e9e">Disabled Slider</label>
<div class="disabled-slider-d" style="width: 400px;"></div>
</div>
</body>
</html>