HTML/Javascript range slider

Question

<!DOCTYPE html>
<html>
<head>
    <script type = "text/javascript">
        $(init);

        function init(){
            $('input[type="range"]').change(getTotal());        
        }

        function getTotal(){
            var total = document.getElementById("outTotal");
            total.innerHTML = Number(slide.value) + Number(slide1.value0);
        }        

    </script>
</head>
<body>
    <input id="slide" type="range" min="1" max="100" step="1" value="10" >
    <input id="slide1" type="range" min=1 max=100 step=1 value=10 >    

    <div>
        <label>Total</label>
        <output id = "outTotal"></output>
    </div>
</body>
</html>

Here's what I have now. I'm trying to total the two range sliders and display when they are changed. I know in the HTML I can add onchange = "getTotal()", but is there a way to have the init() function running all the time. I can't figure out whats wrong with the code in that function.

MightyPork · Accepted Answer · 2014-10-25 16:02:32Z

0

Here I've fixed it for you. Compare this with your code and spot the differences...

$(function(){
    $('input[type=range]').change(getTotal); // not () - you're not calling the function
    getTotal(); // initialy call it
});

function getTotal(){
    var total = document.getElementById("outTotal");
    var slide = document.getElementById("slide");
    var slide1 = document.getElementById("slide1");
    total.innerHTML = 1*(slide.value) + 1*(slide1.value); // here you used the slide slide1 without initializing them at all
}

Live demo http://jsfiddle.net/ox8gxk1h/

edited Oct 25, 2014 at 16:02

answered Oct 25, 2014 at 15:53

MightyPork

19k10 gold badges87 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Larry Lee Over a year ago

I think there is a typo, should be $('input[type="range"]'), you missed the double quotes. PS not my downvote, but I just upvoted, just to clarify :)

MightyPork Over a year ago

@LarryLee They are optional, unless there's a space or some special symbol in the value. Here it works just fine as is.

user3562657 Over a year ago

Thank you for the quick reply, but it still isn't displaying the total. Is there anything else I need to include in the html portion?

MightyPork Over a year ago

@user3562657 Look at the jsfiddle I included, it works there.

Graham T · Accepted Answer · 2014-10-25 16:04:31Z

0

Here you go:

$('input[type="range"]').on("change", function() {
    var total = 0;
    $('input[type="range"]').each(function() {
        number = parseInt(this.value);
        total += number;       
    });
    $("#outTotal").html(total);
});

fiddle: http://jsfiddle.net/oqpsf11f/

answered Oct 25, 2014 at 16:04

Graham T

9749 silver badges14 bronze badges

Collectives™ on Stack Overflow

HTML/Javascript range slider

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related