Advertisement
mushroomh3ad

slider-progress-fill

Oct 15th, 2024
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.69 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Slider com Gradiente</title>
  7.   <style>
  8.     /* Estilo do Slider */
  9.     .slider {
  10.   -webkit-appearance: none;
  11.   width: 100%;
  12.   height: 15px;
  13.   border-radius: 5px;
  14.   background: #d3d3d3;
  15.   outline: none;
  16.   opacity: 0.7;
  17.   -webkit-transition: .2s;
  18.   transition: opacity .2s;
  19. }
  20.  
  21. .slider:hover {
  22.   opacity: 1;
  23. }
  24.  
  25. .slider::-webkit-slider-thumb {
  26.   -webkit-appearance: none;
  27.   appearance: none;
  28.   width: 25px;
  29.   height: 25px;
  30.   border-radius: 50%;
  31.   background: #ffffff;
  32.   cursor: pointer;
  33. }
  34.  
  35. .slider::-moz-range-thumb {
  36.   width: 25px;
  37.   height: 25px;
  38.   border-radius: 50%;
  39.   background: #4CAF50;
  40.   cursor: pointer;
  41. }
  42.   </style>
  43. </head>
  44. <body>
  45.  
  46.  
  47.   <div class="slidecontainer">
  48.     <input type="range" min="0" max="600000" value="300000" step="1000" class="slider" id="myRange">
  49.     <p>Value: <span id="demo"></span></p>
  50.   </div>
  51.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  52. <script>
  53. var slider = document.getElementById("myRange");
  54. var output = document.getElementById("demo");
  55. output.innerHTML = slider.value;
  56.  
  57. function updateGradient(rangeValue) {
  58.   const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100;
  59.   slider.style.backgroundImage = `linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)`;
  60. }
  61.  
  62. // Update gradient onload
  63. updateGradient(slider.value);
  64.  
  65. // Update gradient oninput
  66. slider.addEventListener('input', (e) => {
  67.   output.innerHTML = e.target.value;
  68.   updateGradient(e.target.value);
  69. });
  70. </script>
  71.  
  72. </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement