Download nouislider.css & nouislider.js before try the example below.
noUiSlider code example
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="nouislider.css" rel="stylesheet">
<script src="nouislider.js"></script
</head>
<body>
<div style="width: 90%; margin-left: 5%; padding-top: 30px;">
<div class="parent">
<h3>
<i>NoUiSlider_1 = <span class="slider_value"></span></i>
<input type="button" class="reset_1" value="Reset"/>
<input type="button" class="disable disable_1" value="Disable"/>
<input type="button" class="enable enable_1" value="Enable" style="display: none;"/>
</h3>
<div class="slider slider_1"></div>
</div>
<div class="parent">
<h3>
<i>NoUiSlider_2 = <span class="slider_value"></span></i>
<input type="button" class="reset_2" value="Reset"/>
</h3>
<div class="slider slider_2"></div>
</div>
<div class="parent">
<h3><i>Slider Example</i></h3>
<div style="width: 120px;" class="slider-toggle"></div>
</div>
</div>
</body>
<script type="text/javascript">
createSimpleSlider();
createToggleSlider();
function createSimpleSlider() {
for(var i = 1; i <= 2; i++) {
var range = $('.slider_' + i)[0];
noUiSlider.create(range, {
start: 40,
tooltips: [ true ],
connect: [true, false],
range: {
'min': 0,
'max': 100
},
format: {
to: function ( value ) {
return parseInt(value);
},
from: function ( value ) {
return value;
}
}
}).on('update', function( values, handle ) {
var target = $(this.target);
var slider_tooltip = target.find(".noUi-handle");
if(values[handle] > 50) {
slider_tooltip.addClass("half_way_pass");
}
else {
slider_tooltip.removeClass("half_way_pass");
}
var slider_value = target.closest(".parent").find(".slider_value")[0];
slider_value.innerHTML = values[handle];
});
$('.reset_' + i).click(function() {
var target = $(this);
target.closest(".parent").find(".slider")[0].noUiSlider.set([15]);
})
$('.disable_' + i).click(function() {
var target = $(this);
target.closest(".parent").find(".slider").attr("disabled", "disabled");
target.hide();
target.closest(".parent").find(".enable").show();
})
$('.enable_' + i).click(function() {
var target = $(this);
target.closest(".parent").find(".slider").removeAttr("disabled");
target.hide();
target.closest(".parent").find(".disable").show();
})
}
}
function createToggleSlider() {
var toggleSlider = $('.slider-toggle')[0];
noUiSlider.create(toggleSlider, {
start: 0,
range: {
'min': [0, 1],
'max': 1
},
format: {
to: function ( value ) {
return parseInt(value);
},
from: function ( value ) {
return value;
}
}
});
toggleSlider.noUiSlider.on('update', function( values, handle ) {
var target = $(this.target);
var slider_tooltip = target.find(".noUi-handle");
if(values[handle] > 0) {
slider_tooltip.addClass("half_way_pass");
}
else {
slider_tooltip.removeClass("half_way_pass");
}
var slider_value = target.closest(".parent").find(".slider_value")[0];
slider_value.innerHTML = values[handle];
});
}
</script>
No comments:
Post a Comment