I have created a slider component with jQuery. now I want to implement it as a plugin so I can use it on multiple projects.
but I have problems when I have multiple instances of the slider in my HTML form. how can I detect which slider instance the user is working with?
I have read these but couldn't find out what to do:
https://learn.jquery.com/plugins/basic-plugin-creation/
https://learn.jquery.com/plugins/advanced-plugin-concepts/
HTML:
<body>
<div id="myslider" style="position: absolute; top:20px; left:20px;"></div>
<div id="myslider2" style="position: absolute; top:200px; left:200px;"></div>
<script>
$("#myslider").vslider();
$("#myslider2").vslider();
</script>
CSS:
.slider_holder{
height: 3px;
width: 300px;
position: absolute;
float: left;
left: 0px;
top: 0px;
background-color: #C2C2C2;
border-radius: 3px;
}
.slider_holder span{
height: 5px;
position: absolute;
width: 100%;
top: -1px;
background-color: #FF5A5F;
left: 0px;
}
.slider_holder div{
width: 16px;
height: 16px;
border-radius: 50%;
border: solid 1px #333;
background-color: #fff;
position: absolute;
top: -8px;
cursor: pointer;
}
.slider_holder #fpoint{
left: 0px;
}
.slider_holder_right_slider{
right: 0px;
}
jQuery Plugin file:
(function( $ ){
$.fn.vslider = function() {
var el = "";
var timer_handle;
var currentMousePos = { x: -1, y: -1 };
var min_val = 50000;
var max_val = 1000000;
var from_val = 0;
var to_val = 0;
var container;
container = "#" + this.prop("id");
this.html('<div class="slider_holder">'+
'<span></span>'+
'<div id="fpoint" ondragstart="return false;" title="" data-value=""></div>'+
'<div id="tpoint" ondragstart="return false;" title="" data-value="" class="slider_holder_right_slider"></div>'+
'</div>');
$(".slider_holder div").on( "mousedown", function( event ) {
el = $(this).prop("id");
timer_handle = setInterval(function(){slider_timer();}, 50);
});
$( document ).on( "mouseup", function( event ) {
el = "";
clearInterval(timer_handle);
});
$( document ).on( "mousemove", function( event ) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
function slider_timer() {
if (el != ""){
$("#" + el).css("left", currentMousePos.x - $(".slider_holder").offset().left - 10 + "px");
if ($("#fpoint").position().left + $("#fpoint").width() > $("#tpoint").position().left){
if (el == "fpoint")
$("#fpoint").css("left", $("#tpoint").position().left - $("#tpoint").width() - 2 + "px"); else
$("#tpoint").css("left", $("#fpoint").position().left + $("#fpoint").width() + 2 + "px");
}
if ($("#" + el).position().left < 0) $("#" + el).css("left", "0px");
if ($("#" + el).position().left + $("#" + el).width() > $(".slider_holder").width())
$("#" + el).css("left", $(".slider_holder").width() - $("#" + el).width() + "px");
console.log(container);
$(container + " .slider_holder span").css("visibility", "visible");
$(container + " .slider_holder span").css("left", $("#fpoint").position().left + "px");
$(container + " .slider_holder span").css("width", $("#tpoint").position().left - $("#fpoint").position().left + "px");
from_val = parseInt((($("#fpoint").position().left / $(".slider_holder").width()) * max_val) + min_val);
to_val = parseInt(((($("#tpoint").position().left + $("#tpoint").width()) / $(".slider_holder").width()) * max_val) + min_val);
if (to_val > max_val) to_val = max_val;
if (from_val < min_val) from_val = min_val;
console.log(from_val + ', ' + to_val);
//$("#fpoint").prop("title", from_val);
//$("#tpoint").prop("title", to_val);
}
}
return this;
};
})( jQuery );
$element, etc.