Robot
/
html-tips-tricks
mirror of https://github.com/atapas/html-tips-tricks.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Range done

This commit is contained in:
Tapas Adhikary 2020-08-13 17:06:33 +05:30
parent 8747bb7616
commit 26a8442032
4 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
details/index.html
View File

@ -13,7 +13,7 @@
<div class="demo"> <div class="demo">
<h1>Details Tag</h1> <h1>Details Tag</h1>
<details> <details>
<summary>Click Here to the user details</summary> <summary>Click Here to get the user details</summary>
<table> <table>
<tr> <tr>
<th>#</th> <th>#</th>

8
index.html
View File

@ -3,14 +3,14 @@
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'> <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'> <meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'> <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head> </head>
<body> <body>
<div class="demo"> <div class="demo">
<h1>My Favorite HTML Tips and Tricks</h1> <h1>My Favorite HTML5 Tips and Tricks</h1>
<ul class="list"> <ul class="list">
<li> <li>
<a href='./details/index.html'> <a href='./details/index.html'>
@ -40,6 +40,10 @@
<a href='./datalist/index.html'> <a href='./datalist/index.html'>
Datalist Tag</a> - Allows you to search and add elements Datalist Tag</a> - Allows you to search and add elements
</li> </li>
<li>
<a href='./range/index.html'>
Slider</a> - Do you need a range slider?
</li>
</ul> </ul>
</div> </div>
</body> </body>

4
main.css
View File

@ -45,3 +45,7 @@ li {
.demo .data-attribute { .demo .data-attribute {
padding: 10px; padding: 10px;
} }
.demo .range output {
font-size: 62px;
}

45
range/index.html Normal file
View File

@ -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>