자바 스크립트 세로 슬라이더

Question

javascript에서 세로 슬라이더 위젯을 만들려고합니다. 나는 어떤 플러그인이나 라이브러리를 찾고 있지 않다. 나는 평범한 자바 스크립트를 어떻게 사용하는지 볼려고한다. 나는 일반적인 생각을 가지고 있다고 생각한다.

지금까지 무엇이 개발되었으며 코드를 보려면 소스를보고 크롬에서 링크를여십시오.

http://eco-system2031.appspot.com/pages/ex5slider/verticalslider.html

문제 :

1) 때때로 경계가 범위 (예 : 내가 바로 위 또는 맨 아래에있는 슬라이더를 이동하면 0, 500)가 제대로 계산되지 않습니다.

2) 때로는 마우스를 놓을 때 슬라이더가 해제되지 않고 (mouseup) 슬라이더가 마우스 업 후에도 마우스와 함께 이동합니다.

3) 자바 스크립트를 사용하여 코드를 더욱 강력하고 매끄럽게 만들어야하는 다른 모든 것들.

Answer 1

그리고 끝났습니다. 도와 주셔서 감사합니다. 여기

는 HTML

Minimum Value: <input id="minimum-value" type="text" value="0" /> <br/> 
Maximum Value: <input id="maximum-value" type="text" value="500" /> <br/> 
<input id="submit-value" type="submit" value="Submit" /> <br/> 
Slider Value: <span id="sliderValue"></span> <br/> 
<div id="slider-container"> 
    <div id="slider-bar"></div> 
    <div id="slider-handle"></div> 
</div> 

이며, 여기에 CSS를 여기

 #slider-container { 
     width: 20px; 
     height: 325px; 
     margin: 100px; 
     margin-top: 30px; 
     background: #26AFE3; 
     /* Safari 3-4, iOS 1-3.2, Android 1.6 */ 
     -webkit-border-radius: 20px 20px 20px 20px; 
     /* Firefox 1-3.6 */ 
     -moz-border-radius: 20px 20px 20px 20px; 
     /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ 
     border-radius: 20px 20px 20px 20px; 
    } 

    #slider-bar { 
     width: 100%; 
     height: 100%; 
     background: #E6E6E6; 
     /* Safari 3-4. iOS 1-3.2, Android 1.6 */ 
     -webkit-border-radius: 20px 20px 20px 20px; 
     /* Firefox 1-3.6 */ 
     -moz-border-radius: 20px 20px 20px 20px; 
     /* Opera 10.5, IE9, Safari 5, Chromer, Firefox 4, iOS 4, Android 2.1+ */ 
     border-radius: 20px 20px 20px 20px; 
    } 

    #slider-handle { 
     width: 25px; 
     height: 25px; 
     background: #7C7D82; 
     position: relative; 
     left: -2.5px; 
     top: -10px; 
     /* Safari 3-4, iOS 1-3.2, Android 1.6 */ 
     -webkit-border-radius: 2px 20px 20px 20px; 
     /* Firefox 1-3.6 */ 
     -moz-border-radius: 20px 20px 20px 20px; 
     /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ 
     border-radius: 20px 20px 20px 20px; 
    } 

여기

(function() { 
    // html elements 
    var container = document.getElementById("slider-container"); 
    var slider = document.getElementById("slider-bar"); 
    var handle = document.getElementById("slider-handle"); 
    var submitVal = document.getElementById("submit-value"); 

    // initial values 
    var minVal = Number(document.getElementById("minimum-value").value); 
    var maxVal = Number(document.getElementById("maximum-value").value); 

    var range = maxVal - minVal; 
    var isSliding = false; 


    // recalculate range 
    submitVal.onclick = function() { 
     minVal = Number(document.getElementById("minimum-value").value); 
     maxVal = Number(document.getElementById("maximum-value").value); 
     range = maxVal - minVal; 
    }; 

    // the sliding function 
    var move = function(e) { 

     var mouseY = 0; 
     var containerTop = 0; 
     var newHeight = 0; 
     var containerHeight = 0; 
     var percentHght = 0; 
     var x = 0; 
     var y = 0; 
     var sliderValue = 0; 

     if (!e) var e = window.event; 

     if(e.pageY){ // all browsers except IE before version 9 
      mouseY = e.pageY; 

     } else if (e.clientY) { // IE before version 9 
      mouseY = e.clientY; 
     } 

     containerTop = container.offsetTop; 
     newHeight = mouseY - containerTop; 
     containerHeight = container.offsetHeight; 
     percentHght = newHeight * 100/containerHeight; 

     if((percentHght <= 100) && (percentHght >= 0)) { 
      slider.style.height = (percentHght) + '%'; 
      y = 100 - percentHght; 
      x = y * range/100; 

     } else if(percentHght < 0) { 
      percentHght = 0; 
      slider.style.height = (percentHght) + '%'; 
      y = 100 - percentHght; 
      x = y * range/100; 

     } else if(percentHght > 100) { 
      percentHght = 100; 
      slider.style.height = (percentHght) + '%'; 
      y = 100 - percentHght; 
      x = y * range/100; 
     } 
     sliderValue = Math.round(x); 
     document.getElementById('sliderValue').innerHTML = sliderValue + minVal; 
    }; 

    // adding the slide functionality 
    var addSlide = function() { 
     isSliding = true; 
     if (!window.addEventListener){ 
      document.attachEvent('onmousemove',move); 
     } else { 
      document.addEventListener('mousemove', move, false); 
     } 
    }; 

    // removing the slide functionality 
    var cancelSlide = function() { 
     if(isSliding) { 
      if (window.removeEventListener) { 
       document.removeEventListener('mousemove', move, false); 
      } else if (window.detachEvent) { 
       document.detachEvent('onmousemove', move); 
      } 
     } 
    }; 

    // cancelling event bubbling 
    // cancelling default event action 
    var cancelBubble = function(e) { 
     var evt = e ? e:window.event; 

     if(evt.stopPropogation){ 
      evt.stopPropogation(); 
     } 

     if(evt.cancelBubble != null){ 
      evt.cancelBubble = true; 
     } 

     if(evt.preventDefault){ 
      evt.preventDefault(); 
     } else { 
      evt.returnValue = false; 
     } 
    }; 

    // capture events 
    //capturing the mousedown on the handle 
    handle.onmousedown = function(e) { 
     addSlide(); 
     cancelBubble(e); 
    } 

    //capture the mouseup on the handle 
    handle.onmouseup = function(e) { 
     cancelSlide(); 
     cancelBubble(e); 
    } 

    // capture the mouse up on the slider 
    slider.onmouseup = function(e) { 
     cancelSlide(); 
     cancelBubble(e); 
    } 

    // capture the mouse down on the slider 
    slider.onmousedown = function(e) { 
     move(e); 
     cancelBubble(e); 
    } 

    // capture the mouse up on the container 
    container.onmouseup = function(e) { 
     cancelSlide(); 
     cancelBubble(e); 
    } 

    // capture the mouse down on the container 
    container.onmousedown = function(e) { 
     move(e); 
     cancelBubble(e); 
    } 

    // capture the mouse up on the window 
    document.onmouseup = function(e) { 
     cancelSlide(); 
     cancelBubble(e); 
    } 

})(); 

가 jsfiddle 링크

http://jsfiddle.net/nPaKp/에게 인 JS에게 있습니다 여기

및

가 그런데 링크 아웃 사이드 jsfiddle

http://eco-system2031.appspot.com/pages/ex5slider/verticalslider.html

Answer 2

이며,이 추가 : 일의

slider.onmouseuout = slider.onmouseup; 

종류의 각 onMouseUp에 선언의 끝과의 문제 슬라이더 핸들에서 벗어난 경우 포인터를 따라 움직이는 슬라이더가 사라집니다.