JS not making effect in html?

Question

I'm trying to make a number change when the user plays with the "range-slider" but the number does not want to change.

Here is my code:

var rangeSlider = function() {
  var slider = $(".range-slider"),
    range = $(".range-slider__range"),
    value = $(".range-slider__value");

  slider.each(function() {
    value.each(function() {
      var value = $(this).prev().attr("value");
      $(this).html(value);
    });

    range.on("input", function() {
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

<div class="range-slider">
  <input class="range-slider__range" type="range" value="0" min="0" max="100" step="10">
  <span class="range-slider__value">0</span>
</div>

Can't test it right now, but maybe there is no input event? Maybe it's change it something? Did you check this? — cloned, May 02 '20 at 16:25
1) You don't have jQuery 2) You are running the code before loading the HTML — Juan Elfers, May 02 '20 at 16:29
Does this answer your question? [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — , May 02 '20 at 16:36
Instead of adding _"The problem has been solved. For the downvoter: please explain why did you downvoted this question."_ you should either accept an answer or (imho the better option in this case) delete the question because a missing library won't really help anyone in the future. — Andreas, May 02 '20 at 16:42
@Andreas Opened to close it as a typo. Cannot delete the question. — Daniel Logvin, May 02 '20 at 16:43

Atlas_Gondal · Answer 1 · 2020-05-02T16:36:09.170

You are missing jQuery, your code is working fine. Check working example:

var rangeSlider = function () {
  var slider = $(".range-slider");
   var range = $(".range-slider__range");
   var value = $(".range-slider__value");

  slider.each(function () {
    value.each(function () {
      var value = $(this).prev().attr("value");
      $(this).html(value);
    });

    range.on("input", function () {
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-slider">
                    <input class="range-slider__range" type="range" value="0" min="0" max="100" step="10">
                    <span class="range-slider__value">0</span>
</div>

Pure javascript slider:

var rangeslider = document.getElementById("sliderRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = rangeslider.value; 
  
rangeslider.oninput = function() { 
  output.innerHTML = this.value; 
}

<div class="rangeslider"> 
  <input type="range" min="1" max="100" value="10"
                  class="myslider" id="sliderRange"> 
  <p><span id="demo"></span></p> 
</div>

_"It's working"_ is not an answer. Vote to close as _"not reproducable"_ — Andreas, May 02 '20 at 16:35
@Andreas my bad, I won't repeat this mistake! Thanks for pointing out!!! — Atlas_Gondal, May 02 '20 at 16:37

score 0 · Answer 2 · answered May 02 '20 at 16:38

Check Below the resolved version.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-slider">
                    <input class="range-slider__range" type="range" value="0" min="0" max="100" step="10">
                    <span class="range-slider__value">0</span>
</div>




<script type="text/javascript">
  var slider = $(".range-slider"),
    range = $(".range-slider__range"),
    value = $(".range-slider__value");
    
    
var rangeSlider = function(e) {
   let sliderValue = e.target.value;
   console.log(sliderValue)
    $(".range-slider__value").html(sliderValue)
   
};

document.addEventListener("input", rangeSlider)

</script>

JS not making effect in html?

2 Answers2