HTML5 - Slider controls

Hello, guys.
I have a question about slider control in HTM5 input type lesson

so when i make in in local file and start in the prowser, i have a slider, but i dont have number to appear next to the slider.

BUT when i insert codes in Codepenhtmls form , everythong loads fine.

Why does it happen?

Ah, so the <output> element is working in codepen, but it isn’t working for you when you try the example locally?

Are you trying the local version and the codepen version both in the same browser? What browser?

Looking at the browser compatibility data, <input type="range"> is supported in IE, whereas <output> isn’t.

Hello, mate .
Yes, it does not work locally for me.

For this task i was using Chrome browser.

Let’s do a test. I’ve tried the following example locally in Chrome, and it works for me. Can you try saving it in an HTML file and running it on your Chrome?

This is the same as you can see live at https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types#Slider_controls

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>&lt;input type="range"&gt; example</title>
    <style>
      html, input {
        font-family: sans-serif;
      }

      body {
        width: 90%;
        max-width: 500px;
        margin: 0 auto;
      }

      form {
        margin-top: 20px;
      }

      div {
        margin-bottom: 20px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
      }

      label, input, button {
        font-size: 14px;
        line-height: 1.5
      }

      label {
        width: 100%;
        margin-right: 2%;
      }

      input {
        flex: auto;
        margin-right: 2%;
      }

      button {
        width: 70%;
        margin: 0 auto;
      }

    </style>
   </head>
  <body>
    <form>

      <div>
        <label for="price">Choose a maximum house price: </label>
        <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
        <output class="price-output" for="price"></output>
      </div>
      <div>
        <button>Submit</button>
      </div>
    </form>
    <script>
      const price = document.querySelector('#price')
      const output = document.querySelector('.price-output')

      output.textContent = price.value

      price.addEventListener('input', function() {
        output.textContent = price.value
      });
    </script>
</body>
  </html>

Hello, Chris! thank you for reply. your example works perfectly!
i have found where i did mistake
i have missed TYPE in html code, so script could not load somehow, i think. after i inputed type - it works. Thank you!

<script type="text" src="value.js"></script>

ah, cool. I am happy you worked it out :wink: