Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang=en>
- <head>
- <title></title>
- <meta charset=utf-8>
- <meta name="viewport" content="width=device-width">
- <style>
- #txt3{
- width:600px;
- font-size:25px;
- padding:10px 20px;
- color:maroon;
- border:10px solid red;
- outline:none;
- border-top:0;
- }
- #txt2{
- width:600px;
- font-size:25px;
- padding:10px 20px;
- color:maroon;
- border:10px solid red;
- outline:none;
- border-bottom:10px solid transparent;
- border-top:10px solid transparent;
- border-radius:50px;
- }
- #txt1{
- width:600px;
- font-size:25px;
- padding:10px 20px;
- color:maroon;
- border:10px solid red;
- outline:none;
- border-width:0 10px 0 10px;
- border-radius:50px;
- }
- input{
- width:600px;
- margin:50px;
- display:block;
- }
- #txt{
- width:600px;
- font-size:25px;
- padding:10px 0;
- color:red;
- border:5px solid green;
- outline:none;
- text-align:center;
- border-radius:50px;
- }
- // border-radius:50px; same as border-radius:50px 50px 50px 50px;
- // 4 parameters: top left, top right, bottom right, bottom left ( clockwise )
- </style>
- </head>
- <body>
- <input id='txt' type='text' placeholder='Pls move slider'/>
- <input id='range' oninput='change()' type='range' value='0'/>
- <input id='txt1' type='text' placeholder='Pls move slider'/>
- <input id='range1' oninput='display()' type='range' value='0'/>
- <input id='txt2' type='text' placeholder='Type...'/>
- <input id='txt3' type='text' placeholder='Type...'/>
- <script>
- function change(){
- txt.value=range.value;
- txt.style.width=range.value*6+'px';
- }
- function display(){
- txt1.value=range1.value;
- if(range1.value > 50){
- txt1.style.textAlign='center';
- txt1.style.color='blue';
- }else{
- txt1.style.textAlign='left';
- txt1.style.color='red';
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement