How to Use a jQuery Slider UI Component in Your Web App
Learn how to easily integrate a slider component into your web app. This component is ideal for volume and brightness adjustment, or anywhere else you want to make immediate changes.
In the last episode, you learned about the ProgressBar component. A progress bar indicates how long a process takes or an undetermined wait time. In this episode, you will learn about the Slider component. A slider allows users to choose from a range of values by moving a thumb along a track. The track is a bar that represents all the possibles values that can be chosen and the thumb is a draggable handle. A slider is ideal to use to adjust values that will be updated immediately. Changing the volume, seeking to a position in a media player, or adjusting brightness settings are all cases you can use a slider. Next, you will see how to create a slider with Kendo UI and make a volume control.
Basic Kendo UI Slider
When you initialize the Slider it will have a track for you to select values from 0-10. Possible selections are marked by tick marks. However, tick marks can be removed by setting the tickPlacement option to none. Each tick mark represents a value of 1. You can customize the change in value of each tick mark with the smallStep option. There are buttons on either side of the slider to increase or decrease the value of the slider. These can be removed by making the showButtons parameter false. The following is an example of a slider using the default, Material and Bootstrap themes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
</style>
</head>
<body>
<div id="slider"></div>
<script>
$(document).ready(function(){
$('#slider').kendoSlider();
});
</script>
</body>
</html>
There are several ways to select a value on the slider. Besides using the buttons, you can click on the drag handle and drag it to a new position or jump to a new position by clicking on the track. You can also step through the slider by clicking on the drag handle and using the keyboard arrows to move forward and backward. You can jump by several ticks in the slider by clicking the drag handle then pressing the page up or page down keys. By default, the slider will allow you to make large jumps five steps at a time. This can also be changed using the largeStep option.
Create a Volume Slider
Our volume slider will have the values 0-15 and include a single button on the left-hand side to toggle muting the volume. When the slider has a value of zero, the icon will change to reflect that the volume is off. If the mute button is clicked when the volume is on, the slider’s value will become zero. If the slider is already zero, clicking the mute button will jump the slider to its last known value. First, you will see how to update the appearance of the mute button based on the slider’s value. This is the HTML and CSS needed to create the slider:
<div>
<span id="volume" class="k-icon k-i-volume-up"></span>
<div id="slider"></div>
</div>
#volume {
vertical-align: super;
margin-right: 1em;
cursor: pointer;
}
To detect when the value of the slider is zero, we will need to implement a handler for the slider’s change event. This is the initialization code for the slider:
var slider = $('#slider').kendoSlider({
min: 0,
max: 15,
value: 5,
showButtons: false,
tickPlacement: 'none',
change: onChange
}).data('kendoSlider');
Our onChange function will need to know what the value of the slider is in order to mute and unmute the volume control. It is also responsible for updating the last known value we saved. We will use the slider’s value method to save this value. This is the additional code needed to implement the change event handler:
var lastValue = slider.value();
function onChange(){
lastValue = slider.value();
if (lastValue === 0) {
mute();
} else {
unmute();
}
}
The mute and unmute functions used here will change the icon for our button. In practice, you could include the behavior needed to actually adjust the volume. These are the implementations for both functions:
function mute(){
$('#volume').removeClass('k-i-volume-up');
$('#volume').addClass('k-i-volume-off');
}
function unmute(){
$('#volume').addClass('k-i-volume-up');
$('#volume').removeClass('k-i-volume-off');
}
Now, when you drag the handle all the way to the left, the button will change to a volume off icon. The last part is to add an event handler to update the slider when the mute button is clicked. If the slider’s value isn’t zero, it will be forced to zero and the volume muted. If the volume is already muted, clicking the button will move the slider to the last known value. However, if the slider’s last value was zero, unmuting will make the slider equal to one. This is the click handler for our volume control:
$('#volume').click(function(){
if (slider.value() !== 0) {
mute();
slider.value(0);
} else {
unmute();
value = lastValue > 0 ? lastValue : 1
slider.value(value);
}
});
Summary
We reviewed most of the parameters available to customize for the Slider component. The code example for the volume slider demonstrated here can be easily adapted to other uses. The mute button can be changed to a previous button that will rewind an audio player to the beginning of a track. Or it can be used to turn off any setting. In the next episode, you will see the Sortable component. The Sortable lets you rearrange the order of a list by making the items draggable and droppable.
Try Kendo UI for Yourself
Want to start taking advantage of the more than 70+ ready-made Kendo UI components, like the Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.
Angular, React, and Vue Versions
Looking for UI component to support specific frameworks? Check out Kendo UI for Angular, Kendo UI for React, or Kendo UI for Vue.
Resources
Alberta Williams
Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.
Related Posts
Comments
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required