How To Use HTML Range Slider

How To Use HTML Range Slider

In this tutorial we will see How To Use HTML Range Slider. The JavaScript is used to read and display the value of range slider.

Table of Contents

HTML Code

HTML Code is given below. The input element with type="range" is used to make a range slider. The min and max values of range slider are set using min and max attributes.

The range value is read and displayed using JavaScript function.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Range Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<input type="range" class='range-slider' min="1" max="100" value="100" onchange="range(this)">
</div>
</body>
</html>

CSS Code

CSS Code is given below.

body {    
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.range-slider {
  width: 400px; 
}

JavaScript Code

JavaScript Code is given below, The value of range slider is being displayed using alert function.

<script>
function range(e)
{    
alert(e.value);
}
</script>

Video Tutorial

Watch video tutorial on How To Use HTML Range Slider.

Tags