Trackbar, ползунок

purple/ocean · March 12, 2018

Нужно реализовать ползунок
Нашел тот который нужен на просторах интернета
https://jsfiddle.net/120n2arx/63/
И тут вопрос.
Я никогда не работал с jQuery, у автора все работает, копирую себе в файлы, ничего не работает.
Отображается сам ползунок но с ним никаких действий производить не получается.

Как решить проблему?
Ошибка наверняка банальная.

image.png.06cdd9b31c59c9a8cded4d02df76b2d2.png

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="slider.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js">
    var drag = false;
var values = [];
for(var i = 0; i < 24; i++)
for(var j = 0 ; j < 60;j+=10){
  var h = (i+"").length < 2?"0"+i:i;
  var m = (j+"").length < 2?"0"+j:j;
  values.push(h+":"+m)
  }

$(".slider").each(function(i,e){
updateView(e);
});
$(".slider>.bar>.lp,.slider>.bar>.rp").bind("mousedown",function(){
drag = $(this);
})
$(document).bind("mousemove",function(e){
if(!drag)
  return;
 var x = (e.pageX - $(drag).outerWidth()/2 - $(drag).parent().parent().offset().left)/$(drag).parent().parent().outerWidth();
 if(x < 0 ) x = 0;
 if(x > 1) x = 1;
 var rp = $(drag).parent().find(".rp");
 var lp = $(drag).parent().find(".lp");
 if($(drag).hasClass("lp") && x > $(rp).attr("data-pos") ){
    $(rp).attr("data-pos",x);
 }
 if($(drag).hasClass("rp") && x < $(lp).attr("data-pos") ){
    $(lp).attr("data-pos",x);
 }
 $(drag).attr("data-pos",x);
 updateView($(drag).parent().parent());
});
$(document).bind("mouseup",function(){
drag = false;
});
function updateView(slider){
var l  =$(slider).find(".lp").attr("data-pos");
var r  =$(slider).find(".rp").attr("data-pos");
var x = $(slider).outerWidth() * l;
var w = (r - l)*$(slider).outerWidth();
$(slider).find(".bar").css({left:x+"px",width:w+"px"});
var index = Math.round(values.length*l);
if(index >= values.length)
  index = values.length-1;
$(slider).find(".lp").html("<span>"+values[index]+"</span>");
index = Math.round(values.length*r);
if(index >= values.length)
  index = values.length-1;
$(slider).find(".rp").html("<span>"+values[index]+"</span>");
}
    </script>
  </head>
  <body>
    <div class="slider">
      <div class="bar">
        <div class="lp" data-pos="0.1"></div>
        <div class="rp" data-pos="0.7"></div>
      </div>
    </div>
  </body>
</html>

Нарек · March 12, 2018

8 minutes ago, purple/ocean said:

Нарек, здравствуйте, вы случаем не один на этом форуме всем помогаете?
В консоли ошибок нет

Нет не один, просто на такие вопросы не хочется отвечать, так как все сводится к гаданию, если честно.

А по теме, вероятно не работает, потому что надо скрипт перенести после html разметки, перед тэгом </body> либо обернуть весь скрипт в document.ready

Так как когда скрипт выполняется, он по сути еще не знает что есть такие элементы как например <div class=""lp/>

Edited March 12, 2018 by Нарек

Нарек · March 12, 2018

Ну тут либо гадалка нужна, либо лог из консольки.

purple/ocean · March 12, 2018

4 минуты назад, Нарек сказал:

Ну тут либо гадалка нужна, либо лог из консольки.

Нарек, здравствуйте, вы случаем не один на этом форуме всем помогаете? :lol:
В консоли ошибок нет

Edited March 12, 2018 by purple/ocean

purple/ocean · March 12, 2018

16 минут назад, Нарек сказал:

Нет не один, просто на такие вопросы не хочется отвечать, так как все сводится к гаданию, если честно.

А по теме, вероятно не работает, потому что надо скрипт перенести после html разметки, перед тэгом </body> либо обернуть весь скрипт в document.ready

Нарек, спасибо, document.ready решил проблему.

Sign In

Trackbar, ползунок

Question

purple/ocean

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Нарек

Link to comment

Share on other sites

Нарек

Link to comment

Share on other sites

purple/ocean

Link to comment

Share on other sites

purple/ocean

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information