Home javascript Self Create a range selection slider on pure JS

Self Create a range selection slider on pure JS

Author

Date

Category

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
  };
}

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions