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><input type="range"> 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>