received the requirement to create a range selection slider (integers 10-25), without resorting to jQuery and third-party libraries. Only clean JS! .. Well, hardcore a little.
The question is what is better – resort to the option of creating two connected INPUT [Type = Range] or learn and do with Drag’n’Drop technology?
And then the question is even regarding the first option, because It seems to me that the second is much personally visible:
How to prohibit one of the sliders move towards another after a meeting with the second at the point?
Answer 1
@medvedevdev,
Thanks for participating in yesterday’s dialogue – today I made a slider with the help of d’n’d – because Indeed, it looks more sufficiently on JS.
If anyone needs a slider code:
(I think, by description, you will understand which variable for which is responsible for which element):
var slidelelem = document.getelementbyid ('Range');
var thumbmin = document.getelementByid ('thumb-min');
var thumbmax = document.getelementByid ('thumb-max');
// var thumbmin = Sliderelem.Children [0];
var Slidercoords = GetCoords (Sliderelem);
var RangeEnd = Sliderelem.offsetwidth - thumbmin.offsetwidth;
// VAR RangeEnd = Sliderelem.offSetWidth;
VAR MIN = PARSEINT (GetComputedStyle (Thumbmin). Teleft);
Var Max = Parseint (GetComputedStyle (Thumbmax). Teleft);
Console.log (Parseint (MIN), Parseint (MAX));
// Minimum - 18, maximum - 48
thumbmin.ONSOUSEDOWN = FUNCTION (E) {
var thumbcoords = getcoords (thumbmin);
var shiftx = e.pagex - thumbcoords.left;
Document.ONMousemove = FUNCTION (E) {
var newleft = e.pagex - shiftx - slidercoords.left;
// if outside the slider
if (newleft & lt; 0) {
newleft = 0;
}
If (Newleft & GT; Max - Thumbmin.offSetWidth / 2) {
newleft = max - thumbmin.offsetwidth / 2;
}
min = newleft;
thumbmin.style.left = newleft + 'px';
}
Document.ONMouseUp = Function () {
Console.log (GetCoords (Thumbmin));
Console.log (MIN);
document.onmousemove = document.onmouseUp = NULL;
}
RETURN FALSE;
};
thumbmax.ONSOUSEDOWN = FUNCTION (E) {
var thumbcoords = getcoords (thumbmax);
var shiftx = e.pagex - thumbcoords.left;
Document.ONMousemove = FUNCTION (E) {
var newleft = e.pagex - shiftx - slidercoords.left;
// if outside the slider
If (newleft & lt; min + thumbmin.offsetwidth / 2) {
newleft = min + thumbmin.offsetwidth / 2;
}
If (Newleft & GT; RangeEnd) {
NEWLEFT = RANNGEEND;
}
Max = Newleft;
thumbmax.style.left = newleft + 'px';
}
Document.ONMouseUp = Function () {
Console.log (GetCoords (Thumbmax));
Console.log (MAX);
document.onmousemove = document.onmouseUp = NULL;
}
RETURN FALSE;
};
thumbmin.ondragstart = function () {
RETURN FALSE;
};
Function GetCoords (Elem) {
var box = elem.getBoundingClientRect ();
Return {
Top: Box.top + pagetyoffset,
Left: Box.left + PageXoffset
};
}