[html4strict] Range Slider for Tasks Progress

Viewer

copydownloadembedprintName: Range Slider for Tasks Progress
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5.  
  6. <!--CSS code below-->
  7. <style>
  8.  
  9.     
  10. .slidecontainer {
  11.   width: 100%;
  12. }
  13.  
  14. .slider {
  15.   -webkit-appearance: none;
  16.   width: 50%;
  17.   height: 15px;
  18.   border-radius: 5px;  
  19.   background: #d3d3d3;
  20.   outline: none;
  21.   opacity: 0.7;
  22.   -webkit-transition: .2s;
  23.   transition: opacity .2s;
  24. }
  25.  
  26. .slider::-webkit-slider-thumb {
  27.   -webkit-appearance: none;
  28.   appearance: none;
  29.   width: 25px;
  30.   height: 25px;
  31.   border-radius: 50%; 
  32.   background: #04AA6D;
  33.   cursor: pointer;
  34. }
  35.  
  36. .slider::-moz-range-thumb {
  37.   width: 25px;
  38.   height: 25px;
  39.   border-radius: 50%;
  40.   background: #04AA6D;
  41.   cursor: pointer;
  42. }
  43. </style>
  44. <!--End of CSS code -->
  45.  
  46. </head>
  47. <body>
  48.  
  49. <h1>Range Slider for Tasks Progress</h1>
  50.  
  51.  
  52. <div class="slidecontainer">
  53.  
  54.   <input type="range" min="0" max="100" value="0" class="slider" id="myRange">
  55.   
  56.   <p>Value: <span id="demo"></span></p>
  57. </div>
  58.  
  59.  
  60. <!--Java Scripts code below-->
  61. <script>
  62. var slider = document.getElementById("myRange");
  63. var output = document.getElementById("demo");
  64. output.innerHTML = slider.value;
  65.  
  66. slider.oninput = function() {
  67.   output.innerHTML = this.value;
  68. }
  69. </script>
  70. <!--End of Java Scripts code below-->
  71.  
  72. </body>
  73. </html>
  74.  

Editor

You can edit this paste and save as new:


File Description
  • Range Slider for Tasks Progress
  • Paste Code
  • 15 Jun-2021
  • 1.28 Kb
You can Share it: