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

8
index.html
View File

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

4
main.css
View File

@ -45,3 +45,7 @@ li {
.demo .data-attribute {
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>