javascript - Support for partial fill of HTML5 range input in WebKit/Gecko -

javascript - Support for partial fill of HTML5 range input in WebKit/Gecko -

it's assignment create slider control, without using external libraries. jquery allowed (not ui). first thought have write own command scratch, stumbled range command html5. looked win situation, part of task coloring track differently seen in image.

it surprised me ie winner here since has ::-ms-fill-lower pseudo element can styled. unfortunately webkit/gecko seems lacking completely.

do think hacked somehow ? can think of kind of floating div controlled javascript changes it's size, seems rather nasty.

if not possible, can recommend me resource how build on own? seems rather complex handle dragging & clicking correctly.

ok, solved easily, canvas placed under page, watching input , change events on input[type=radio] drawing rectangle. had detect, if ::-ms-fill-lower pseudo element supported , skip process. did this...

try { document.queryselector('input[type=radio]::-ms-fill-lower'); homecoming true; } grab { homecoming false; }

to draw rectangle did utilize jquery this...

var width = $src.width(); var height = $src.height() + 1 var offset = $src.offset(); var x = offset.left + 1; var y = offset.top + 1; var ticksize = width / $src.attr('max'); ctx.fillrect x, y, ($src.val() * ticksize), height

javascript jquery html css html5