純粋なjavascript範囲スライダコントロールの作成

Question

多少動作しているスライダコントロールを作成することができましたが、なんらかの感覚があります。それは正常なコントロールとしては、まったく動作しません。ときには滑っている間に固まってしまっても、自分で見たいと思うかもしれません。

スムーズにスライドするようにスライダーを作成し、カーソルが赤いトラックに正確に必要な場合は、どのように作成しますか？

function createRange(e) { 
    var range = (((e.offsetX - 0) * (255 - 0))/(200-40 - 0)) + 0; 
    var rounded = Math.round(range); 

    return rounded; 
} 

function colorSlider(e) { 
    createRange(e) 
} 

var dragging = false; 

document.getElementById("knob").addEventListener('mousedown', function(e) { 
    dragging = true; 
    e.target.style.pointerEvents = "none" 
}) 

window.addEventListener('mousemove', function(e) { 
    if (dragging) { 
    if (createRange(e) <= 255) { 
     document.getElementById("knob").style.left = e.offsetX + "px" 
    } 
    } 
}) 

Answer 1

ここでは、スライダの固定バージョンです。

var dragging = false; 
 
var knobOffset = 0; 
 

 
var track = document.getElementById('track'), 
 
    knob = document.getElementById('knob'), 
 

 
    trackWidth = track.offsetWidth, 
 
    trackLeft = track.offsetLeft, 
 
    trackRight = trackLeft + trackWidth, 
 

 
    knobWidth = knob.offsetWidth, 
 
    maxRight = trackWidth - knobWidth; // relatively to track 
 

 
knob.addEventListener('mousedown', function(e) { 
 
    // knob offset relatively to track 
 
    knobOffset = e.clientX - knob.offsetLeft; 
 
    dragging = true; 
 
}); 
 

 
window.addEventListener('mouseup', function(e) { 
 
    dragging = false; 
 
}) 
 

 
window.addEventListener('mousemove', function(e) { 
 
    if (dragging) { 
 
     // current knob offset, relative to track 
 
     var offset = e.clientX - trackLeft - knobOffset; 
 
     if(offset < 0) { 
 
     var offset = 0; 
 
     } else if(offset > maxRight) { 
 
     var offset = maxRight; 
 
     } 
 
     
 
     knob.style.left = offset + "px" 
 
    } 
 
});

#track {width: 200px;height: 5px; margin:100px; background: red} 
 
#knob {height: 10px; width: 40px; background: black;position: relative; }

<div id='track'> 
 
    <div id="knob"></div> 
 
</div>