diff --git a/details/index.html b/details/index.html
index f5116b9..79340a3 100644
--- a/details/index.html
+++ b/details/index.html
@@ -13,7 +13,7 @@
     <div class="demo">
         <h1>Details Tag</h1>
         <details>
-            <summary>Click Here to the user details</summary>
+            <summary>Click Here to get the user details</summary>
             <table>
                 <tr>
                     <th>#</th>
diff --git a/index.html b/index.html
index 53ac657..f6cf829 100644
--- a/index.html
+++ b/index.html
@@ -3,14 +3,14 @@
 <head>
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <title>HTML Tips and Tricks</title>
+    <title>HTML5 Tips and Tricks</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet"> 
     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 </head>
 <body>
     <div class="demo">
-        <h1>My Favorite HTML Tips and Tricks</h1>
+        <h1>My Favorite HTML5 Tips and Tricks</h1>
         <ul class="list">
             <li>
                 <a href='./details/index.html'>
@@ -40,6 +40,10 @@
                 <a href='./datalist/index.html'>
                     Datalist Tag</a> - Allows you to search and add elements
             </li>
+            <li>
+                <a href='./range/index.html'>
+                    Slider</a> - Do you need a range slider?
+            </li>
         </ul>
     </div>
 </body>
diff --git a/main.css b/main.css
index a455c09..815f0be 100644
--- a/main.css
+++ b/main.css
@@ -45,3 +45,7 @@ li {
 .demo .data-attribute {
   padding: 10px;
 }
+
+.demo .range output {
+  font-size: 62px;
+}
\ No newline at end of file
diff --git a/range/index.html b/range/index.html
new file mode 100644
index 0000000..83da482
--- /dev/null
+++ b/range/index.html
@@ -0,0 +1,45 @@
+
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>HTML Tips and Tricks - Range Slider</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' media='screen' href='../main.css'>
+
+    <script>
+        function changeValue(event) {
+            let value = event.target.value;
+            let output = document.getElementById('output');
+            output.value = value;
+        }
+    </script>
+</head>
+
+<body>
+    <div class="demo">
+        <h1>Slider</h1>
+        <form method="post">
+            <input 
+                type="range" 
+                name="range" 
+                min="0" 
+                max="100" 
+                step="1" 
+                value=""
+                onchange="changeValue(event)"/>
+        </form>
+        <div class="range">
+            <output id="output" name="result">  </output>
+        </div>
+    </div>
+</body>
+
+</html>
+
+
+
+
+
