1

When i press the popup in chrome the slider appears but it does not display the value when i move it around and i cant figure out why it is like the popup window isnt registering the input or something.

enter image description here

Here is the code im a real noob when it comes to html and javascript so explain it like im 5 thanks!

HTML:

<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="width: 400px; height: 400px; text-align: center">
    <p1>
        Volume Control
    </p1>
    <style>
        .slidecontainer {
          width: 100%;
        }
        
        .slider {
          -webkit-appearance: none;
          width: 100%;
          height: 25px;
          background: #d3d3d3;
          outline: none;
          opacity: 0.7;
          -webkit-transition: .2s;
          transition: opacity .2s;
        }
        
        .slider:hover {
          opacity: 1;
        }
        
        .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 25px;
          height: 25px;
          background: #4CAF50;
          cursor: pointer;
        }
        
        .slider::-moz-range-thumb {
          width: 25px;
          height: 25px;
          background: #4CAF50;
          cursor: pointer;
        }
        </style>
        </head>
        <body>
        
        <h1>Custom Range Slider</h1>
        <p>Drag the slider to display the current value.</p>
        
        <div class="slidecontainer">
          <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
          <p>Value: <span id="demo"></span></p>
        </div>
        
        <script>
        var slider = document.getElementById("myRange");
        var output = document.getElementById("demo");
        output.innerHTML = slider.value;
        
        slider.oninput = function() {
          output.innerHTML = this.value;
        }
        </script>        
</body>
</html>

MANIFEST:

{
    "name": "Volume Controller",
    "version": "1.0",
    "description": "Controls Volume",
    "manifest_version": 2,
    "permissions": [
        "<all_urls>"
      ],
    "browser_action": {
        "default_popup": "popup.html",
        "default_title": "Blank"
    }
    
  }
Radiohead
  • 11
  • 2
  • Hey man, can you add a screenshot and more info? – Tomas Mota Feb 03 '21 at 22:46
  • i added an image but i dont know what else to say really – Radiohead Feb 03 '21 at 22:51
  • I just tried your code and it worked on my machine. Try to select the place where the value would be and inspect that. Let me know if there is something there or not – Tomas Mota Feb 03 '21 at 22:58
  • i did and there isnt anything are you trying the code in an actually extension or elsewhere because i think it has something to do with the chrome popup not updating – Radiohead Feb 03 '21 at 23:00
  • I have created a file and I am opening the code in a file, not an extension. I believe the code is in the extension itself – Tomas Mota Feb 03 '21 at 23:01
  • i would think so as well but i think the popup isnt interacting with the html file like it should – Radiohead Feb 03 '21 at 23:06
  • I'm sorry then, I won't be able to help you out, I don't know anything on chrome extensions. I'll upvote your question to see if anyone else will give you a hand. Best of luck man, have a good one – Tomas Mota Feb 03 '21 at 23:08
  • 1
    alright well thanks for trying i appreciate it – Radiohead Feb 03 '21 at 23:10

1 Answers1

0

Scripts should be isolated from html. So in your popup.html should be <script src="popup.js"></script> and in popup.js file:

const slider = document.getElementById("myRange");
const output = document.getElementById("demo");
output.innerHTML = slider.value;
        
slider.oninput = (e) => {
    output.innerHTML = e.target.value;
}
RauboLuk
  • 371
  • 1
  • 2
  • 7