CODEWITHSUNDEEP
javascripthtmlcss
Francis
Francis

Reputation: 147

how to use onmousedown and onchange together

I have a div and three slide-bars i.e. input type=range. When the slide-bars are dragged accordingly the background-color of the div is changed. I have used 'onchange' event to call a function with 2 parameters this.value and a number; that sets the background-color of the div The three slide-bars are representing 'rgb' values with a range of 0-255. So far this is working.

But the way i want it to work is not what is happening right now. When the slide-bar is dragged the color is not changing instead it changes when 'onmouseup' action occurs. I want the color to change when the slide-bar is being dragged. Here is my code:

<html>
            <head>
                <script>
                var r=0;
                var g=0;
                var b=0;
                    function set(){
                        r=g=b=128;
                        document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
                    }
                    function change(val,bar){

                        if (bar==1){
                             r=val;
                        }
                        if (bar==2){
                             g=val;
                        }
                        if (bar==3){
                             b=val;
                        }

                        document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
                    }
                </script>
            </head>

            <body onload="set()">

                <div id="div" style="width:400px;height:100px;">

                </div>
                <table border="">
                <tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255"  onchange="change(this.value,1)"></td></tr>
                <tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,2)"></td></tr>
                <tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,3)"></td></tr>
                </table>
            </body>
        </html>

Upvotes: 0

Views: 472

Answers (3)

jdgregson
jdgregson

Reputation: 1587

You can use onInput to get the changes live. Note that onInput isn't supported in some versions of IE, so I left onChange in there as a fallback to cover all of your bases.

var r=0;
var g=0;
var b=0;

function set() {
    r=g=b=128;
    var div = document.getElementById('div');
    div.style.backgroundColor="rgb("+r+","+g+","+b+")";
}

function change(val,bar){
    if (bar==1){
        r=val;
    }
    if (bar==2){
        g=val;
    }
    if (bar==3){
        b=val;
    }

    var div = document.getElementById('div');
    div.style.backgroundColor="rgb("+r+","+g+","+b+")";
}
<html>
<head>
</head>
<body onload="set()">
    <div id="div" style="width:400px;height:100px;"></div>
    <table border="">
        <tr>
            <td>red</td>
            <td>
                <input id="r_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,1)" onchange="change(this.value,1)">
            </td>
        </tr>
        <tr>
            <td>blue</td>
            <td>
                <input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)" onchange="change(this.value,2)">
            </td>
        </tr>
        <tr>
            <td>green</td>
            <td>
                <input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)" onchange="change(this.value,3)">
            </td>
        </tr>
    </table>
</body>
</html>

Upvotes: 3

Jordumus
Jordumus

Reputation: 2783

Instead of the onChange, which triggers after the change happened, you can use the onInput event. (more info).

Important to note is that onInput (just as input:type=range) is not available on IE8 and below, nor on Opera 9 and below.

<table border="">
     <tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255"  oninput="change(this.value,1)"></td></tr>
     <tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)"></td></tr>
     <tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)"></td></tr>
 </table>

jsFiddle

Upvotes: 0

moonwalker
moonwalker

Reputation: 1177

You can use the input event handler for this. For example:

<input type="range" oninput="change(this.value,x)">

Upvotes: 1

Related Questions