jQuery slider without using jQuery UI plugin

download-buttonlive-demo-button

Many of us know that it is very easy to implement jQuery slider using jQuery UI plugin. There mi8 be certain requirements that you cannot use any other plugins. In this tutorial am gonna implement jQuery slider without using jQuery UI plug in.
For this I am going to take three elements. The slider bar, then the slider button and the slider progress.
First lets create these three elements dynamically.

htm = '<div class="slide-control">'+
        '<div class="slide-control-button" data-control-group="'+control+'"></div>'+
        '</div>';

For the slider button to move we need to handle mouse down event and also mouse move event.
So lets handle mouse down event of the slider. In this we have to take the initial offset of the slider button and holder. Lets write jQuery code for this,

      button.on('mousedown', function(e) {		//mousedown event handled
       e.preventDefault();
        holderOffset = sliders.offset().left;
        startOffset = button.offset().left - holderOffset;
        sliderWidth = sliders.width();
        $(document).on('mousemove', moveHandler);
        $(document).on('mouseup', stopHandler);
    });

So in the above code the initial offset and the holder offset is set and stored.
Lets handle mouse move event for this.

					//mouse move event handled
		j=i;
	        var posX = e.pageX - holderOffset;
	        posX = Math.min(Math.max(0, posX), sliderWidth-18);
			i = button.offset().left - 88;
			if(j>i)
			{
				$("#horbar3x").css({"width": i});
				$("#verbar3x").css({"margin-top": -i*0.79-71});
			}
			else
			{
				$("#horbar3x").css({"width": i});
				$("#verbar3x").css({"margin-top": -i*0.79-71});
			}
			$('#restuaPoints').html(Math.round(i/1.82)*100);

	        button.css({
	            left: posX
	        });

In the above code for the mouse move event, for every mouse move the current value is updated based on the previous value and the current value.
To know whether the slider is in increasing or decreasing mode,

j=i;
			i = button.offset().left - 88;
			if(j>i)
			{
				//decreasing mode
			}
			else{
				//increasing mode
			}

To get the progress bar we use this jQuery code

button.css({
	            left: posX
	        });

Lets have a value for the progress bar. For this the button movement is taken

	$('#restuaPoints').html(Math.round(i/1.82)*100);

With the above Jquery code we can easily implement Jquery slider without the help of any plugin.
The above code works fine in all platforms with jquery included.
Hope you found this helpful 🙂


Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Venkatesh has 2 years experience in the field of web Designing. He holds bachelor degree in Computer Science Engineering from JNT University ,Hyderabad. Venkatesh is well versed with HTML5, CSS3 and JQUERY. He has also worked on KINETIC JS and EXT JS. As a UX developer, Venkatesh has tried to bring about effective teaching and learning in the courses he designed.