Walt Walt - 2 months ago 17
jQuery Question

HTML5 range slider input value with jQuery

I try to do simple if/else statements, so for example "If value on slider is 100, append p tag with some text to miles class". I know it is something simple, but I look through the jQuery docs and didn't find the solution for me.

HTML:

<html><head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="miles"></div>
<div class="battery-slider">
<input class="slider-range" type="range" value="0" min="75" max="250" step="25">
<span class="slider-value">0</span>
</div>
</div>
</body>
</html>


JavaScript:

var rangeSlider = function(){
var slider = $('.battery-slider'),
range = $('.slider-range'),
value = $('.slider-value');
miles = $('.miles');

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);
});
});

if ( $(range).val(value) == 100 ) {
$(miles).append( "<p>Pass</p>" );
}
else {
$(miles).append( "<p>Fail</p>" );
}
};
rangeSlider();

MJH MJH
Answer

Your requirements are a bit unclear, but perhaps you're looking for something like this:

var rangeSlider = function(){
    var slider = $('.battery-slider'),
    range = $('.slider-range'),
    value = $('.slider-value');
    miles = $('.miles');

    slider.each(function(){
      value.each(function(){
          var value = $(this).prev().attr('value');
          $(this).html(value);
      });
      range.on('input', function(){
        if ( this.value == 100 ) {
            $(miles).append( "<p>Pass</p>" );
        }
        else {
            $(miles).append( "<p>Fail</p>" );
        }

        $(this).next(value).html(this.value);
      });
    });
};
rangeSlider();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
    <div class="battery-slider">
        <input class="slider-range" type="range" value="0" min="75" max="250" step="25">
        <span class="slider-value">0</span>
    </div>
    <div class="miles"></div>
</div>