two event handlers (click and mousemove) at the same time on one element

Question

I'm creating a sort of slider which when a certain point on the window is clicked the element will stretch its width to that point. I would also like to add a drag event handler and I have read about mousedown and mousemove and mouseup being the three handlers that need to be combined. This code works quite well but I'm wondering is there a better way to combine these handlers because at the moment I am repeating code whihc Im not sure is necessary. I'm quite new to javascript and jquery. Thanks for the help

function reposition_bar(mouse_touch_position){
    document.onclick = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);
    }
    document.onmousemove = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);

    }
    this.onmouseup = function() {
    document.onmousemove = null;
    }

}

and here is where i create the event listener.

 $(timer_area).on("mousedown", reposition_bar);

my html:

<div id="timer_area0" class="timer_area">
    <div id="timer_bar_outer0" class="timer_bar_outer"></div>
    <div id="timer_bar0" class="timer_bar"></div>
</div>

and my css:

.timer_area{
position: relative;


width: 100%;
margin: 20px auto 10px auto;
height: 20px;
backgroud: #fff;
}

.timer_bar{  
z-index: -1;
display: block;  
width: 3%;  
height: 8px;  
border-radius: 4px;  
clear: both;  
position: absolute; 
margin-top: 6px;
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
                0px 0px 3px 2px rgba(250,250,250,1);  
background-color: #fff; 
}  

.timer_bar_outer{
padding: 0px 3% 0px 3%; 
    width: 100%;  /*this should be same number as 100/windowduration*/
    height: 20px;  
    display: block;  
    z-index: -2;  
    position: absolute;  
    background-color: rgb(0,0,0); 
margin-left: -3%;
border-radius: 10px;  
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),   
                inset 0px 1px 2px rgba(0, 0, 0, 0.5); 
box-sizing: content-box;
}

.timer_bar.on{  
   background-color: blue;  
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
                0px 0px 3px 2px rgba(5,242,255,1); 
}

Edit after @tlindell comment:

thank you for your comment. I have tried out the range sliders but could not style them with css the way i wanted after doing much research. (ie my vertical slider worked perfect until I put a box shadow on it and it did not work vertically anymore)... I am happy with my slider. its just i was wondering if i could have written the reposition_bar method better because the way ive done it above, this code:

document.onclick = function(mouse_touch_position){
            var timer_bar_position = $(timer_bar);
            timer_bar_offset = timer_bar_position.offset();
            var total_width_timer = $("#timer_bar_outer0").width();
            var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
            player.currentTime = (window.duration)*(new_width_timer/100);
        }

is exaclty the same as this accept they are different event handlers e.g onmousemove and onclick:

document.onmousemove = function(mouse_touch_position){
            var timer_bar_position = $(timer_bar);
            timer_bar_offset = timer_bar_position.offset();
            var total_width_timer = $("#timer_bar_outer0").width();
            var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
            player.currentTime = (window.duration)*(new_width_timer/100);

        }

so can i combine them in a way for example

document.onmousemove || document.onclick = function(mouse_touch_position){
                var timer_bar_position = $(timer_bar);
                timer_bar_offset = timer_bar_position.offset();
                var total_width_timer = $("#timer_bar_outer0").width();
                var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
                player.currentTime = (window.duration)*(new_width_timer/100);

            }

Thanks for your edit @tlindell. It is something like what I would like but I tried the following which doesnt really have the desired effect. It is not registering the mouseup event.

function reposition_bar(mouse_touch_position){
    document.onmousemove = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);

    }
    this.onmouseup = function() {
    document.onmousemove = null;
    }

}

$(timer_area).on("mousedown click", reposition_bar);

I would like the function to be called with onmousedown and then within the function I would like it to handle the events of onmousemove and onclick. can I do something like this within the function reposition_bar:

function reposition_bar(mouse_touch_position){
    document.on("mousemove click") = function(mouse_touch_position){
        var timer_bar_position = $(timer_bar);
        timer_bar_offset = timer_bar_position.offset();
        var total_width_timer = $("#timer_bar_outer0").width();
        var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/
        player.currentTime = (window.duration)*(new_width_timer/100);

    }
    this.onmouseup = function() {
    document.onmousemove = null;
    }

}

$(timer_area).on("mousedown", reposition_bar);

That does not work at all though so I guess the syntax is wrong in this line within the function:

document.on("mousemove click") = function(mouse_touch_position){

}

Thanks again. I am quite new to this :)

Thanks @tlindell for the answer. This is what i did in the end. (see the window.onload section for the edits)

<script>
    var player;
    var intv;
    var duration;
    var song_id;
    var button;

    //init
window.onload = function(){
        player = document.getElementById('audio_player');


            $('#volume_control_area').on('mousedown mouseup mouseleave click', function(e){
                if(e.type === 'mousedown'){
                        $(this).bind('mousemove', reposition);
                }
                else if((e.type === 'mouseup') || (e.type === 'mouseleave')) {
                        $(this).unbind('mousemove', reposition);
                }else if(e.type === 'click'){
                        $(this).bind('click', reposition);
                }
            });
}

function reposition(mouse_volume_position){

        var volume_knob_position = $(".volume_control_knob");   
        volume_area_offset = $('#volume_control_area').offset();
        var total_height_volume = $('#volume_control_area').height();
        console.log(total_height_volume);
        var new_height_volume = ((volume_area_offset.top + total_height_volume)- mouse_volume_position.pageY); /*converting to percantages because the width of the timer is in percentages in css*/

        if(new_height_volume > 8 && new_height_volume <= 100){
        console.log(new_height_volume);
        player.volume = new_height_volume/100;
        $(".volume_control_knob").css({

        'height' : new_height_volume + '%' 

        });
        }

}




</script>

Answer 1

Welcome Jquery ui!

you can resize divs here:

jquery ui resizable

and get range sliders here:

Jquery ui silders

EDIT

absolutely! here is the way to do that.

$('#element').on('keyup keypress blur change', function() {
    ...
});

Or just pass the function as the parameter to normal event functions:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

jQuery multiple events to trigger the same function

UPDATE:

<script>
    let player;
    let intv;
    let duration;
    let song_id;
    let button;

    //init
    window.onload = function(){
        player = document.getElementById('audio_player');

        $('#volume_control_area').on('mousedown mouseup', function(e){
            if(e.type === 'mousedown'){
                $(this).bind('mousemove', reposition);
            }
            else if(e.type === 'mouseup'){
                $(this).unbind('mousemove', reposition);
            }
        })
    }

    function reposition(mouse_volume_position){
        let volume_knob_position = $(".volume_control_knob");   
        let volume_area_offset = $('#volume_control_area').offset();
        let total_height_volume = $(volume_control_area).height();
        let new_height_volume = ((volume_area_offset.top + total_height_volume)- mouse_volume_position.pageY); /*converting to percantages because the width of the timer is in percentages in css*/

        if(new_height_volume > 8 && new_height_volume <= 100){
            console.log(new_height_volume);
            player.volume = new_height_volume/100;
                $(".volume_control_knob").css({

                    'height' : new_height_volume + '%' 

                });
        }
    }   
</script>