Assalamualaikum Wr Wb. Pada kesempatan kali ini saya akan membahas tentang Jquery UI khususnya cara membuat Range Slider dengan JQuery UI. Jquery UI (Jquery User Interface) adalah salah satu framework / library javascript. Sesuai namanya, pada Jquery UI telah dimasukkkan efek - efek, widget dan tema yang berfungsi untuk mempercantik web. salah satu widget yang ada di Jquery UI ini adalah Range Slider. sebenarnya HTML telah menyediakan range slider sendiri yaitu :
<input type="range" max="1500" min="400">
tetapi pada kesempatan kali ini kita tidak akan membahas Range milik HTML tetapi milik Jquery UI. berikut langkah - langkahnya :
- Siapkan sebuah file html. bernama Range.html (atau terserah).
- Isi dari Range HTML sebagai berikut.
Range.html
<head>
<head>
<title>Range Slider dengan JqueryUI</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Jquery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="col-md-6 kiri">
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">$</span>
<input id="slider-price-low" type="text" class="form-control" aria-describedby="basic-addon2">
</div>
</div>
<div class="col-md-6 kanan">
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">$</span>
<input id="slider-price-high" type="text" class="form-control" aria-describedby="basic-addon2">
</div>
</div>
</div>
<div id="slider-price"></div>
</div>
<!-- Jquery UI JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Jquery UI Range Script -->
<script>
$(document).ready(function() {
var min_rent = 400,
max_rent = 1500;
$('#slider-price-low').val(min_rent);
$('#slider-price-high').val(max_rent);
$('#slider-price').slider({
orientation: 'horizontal',
range: true,
animate: 200,
min: 0,
max: 5000,
step: 100,
value: 0,
values: [min_rent, max_rent],
slide: function(event,ui) {
$('#slider-price-low').val(ui.values[0]);
$('#slider-price-high').val(ui.values[1]);
}
});
$('#slider-price-low').change(function () {
var low = $('#slider-price-low').val(),
high = $('#slider-price-high').val();
low = Math.min(low, high);
$('#slider-price-low').val(low);
$('#slider-price').slider('values', 0, low);
});
$('#slider-price-high').change(function () {
var low = $('#slider-price-low').val(),
high = $('#slider-price-high').val();
high = Math.max(low, high);
$('#slider-price-high').val(high);
if(high > 5000) {
$('#slider-price-high').val('5000');
}
$('#slider-price').slider('values', 1, high);
});
});
</script>
</body>
</head>
Kode diatas aka menghasilkan tampilan sebagai berikut. Sekian dari saya, jika ada pertanyaan silahkan ditanyakan. Wasalamuallaikum Wr Wb
