CODEWITHSUNDEEP
javascriptjqueryeventsdelegatesrange
Ipad
Ipad

Reputation: 392

Javascript delegating events from div to input type range

i am trying to delegate a click event from a div, which is above my input[type=range], to the range value. That means, the div behaves exactly the same way like the range-slider if i click or touch into the range-bar.

Here is my example code:

<div id="container" style="width: 200px; height: 200px; background-color: red;">
    <div id="scale" style="height: 100px;">
        Skala
    </div>
    <div style="height: 100px; text-align: center;">
        <input id="range" type="range" min="10" max="100"/>
    </div>
</div>

$(document).ready(function () {
    $('#scale').click(function (event){
        $('#range').trigger('change');
    });

    $('#range').change(function (event) {
        console.log(event)
    });
});

here is the fiddle, if you want:

http://jsfiddle.net/Ipad0214/ouf6x3xa/2/

i hope you understand my question, what i am trying to do.

Regards, Patrick

Upvotes: 2

Views: 375

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

The basic idea is to get the mouse position where you click (relative to the div), scale it to the range you want, then update the slider value.

$(document).ready(function () {
    $('#scale').click(function (e) {
        var parentOffset = $(this).parent().offset();
        var relX = e.pageX - parentOffset.left;
        $('#range').val(relX).trigger('change');
    });

    $('#range').change(function (event) {
        console.log(event)
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/ouf6x3xa/5/

The scaling involves taking the position clicked, relative to the width of the element then scaling and offsetting to the slider range.

This one uses the full width of the div as the slider width, but you may want it to be parallel.

Example: http://jsfiddle.net/TrueBlueAussie/ouf6x3xa/7/

Upvotes: 2

Related Questions