D3 js Interactive Slider Bar script type text javascript src https d3js org d3 v7 min js script style body min height 600px font family avenir next Arial sans serif font size 12px color 696969 ticks font size 10px track track inset track overlay stroke linecap round track stroke 000 stroke opacity 0 3 stroke width 10px track inset stroke dcdcdc stroke width 8px track overlay pointer events stroke stroke width 50px stroke transparent cursor crosshair handle fill fff stroke 000 stroke opacity 0 5 stroke width 1 25px style script Set Dimensions const width 600 const height 100 const margin 40 const xMax width margin 2 const yMax height margin 2 const svg d3 select body append svg attr width width attr height height append g attr transform translate margin margin var formatDateIntoYear d3 timeFormat Y slider let range 1970 2020 const year d3 scaleLinear domain 0 width range range var x d3 scaleTime domain 0 width range 0 width clamp true var slider svg append g attr class slider attr transform translate margin height 5 slider append line attr class track attr x1 x range 0 attr x2 x range 1 select function return this parentNode appendChild this cloneNode true attr class track inset select function return this parentNode appendChild this cloneNode true attr class track overlay call d3 drag on start interrupt function slider interrupt on start drag function v a update v x slider insert g track overlay attr class ticks attr transform translate 0 18 selectAll text data x ticks 10 enter append text attr x x attr y 10 attr text anchor middle text function d return formatDateIntoYear d var handle slider insert circle track overlay attr class handle attr r 9 var label slider append text attr class label attr text anchor middle text formatDate startDate text date attr transform translate 0 25 slider interaction update function update h update position and text of label according to slider scale handle attr cx x h label attr x x h text Math round year h update 0 script body script console log ready script
height 5 slider append line attr class track attr x1 x range 0 attr x2 x range 1 select function return this parentNode appendChild this cloneNode true attr class track inset select function return this parentNode appendChild this cloneNode true attr class track overlay call d3 drag on start interrupt function slider interrupt on start drag function v a update v x slider insert g track overlay attr class ticks attr transform translate 0 18 selectAll text data x ticks 10 enter append text attr x x attr y 10 attr text anchor middle text function d return formatDateIntoYear d var handle slider insert circle track overlay attr class handle attr r 9 var label slider append text attr class label attr text anchor middle text formatDate startDate text date attr transform translate 0 25 slider interaction update function update h update position and text of label according to slider scale handle attr cx x h label attr x x h text Math round year h update 0 script body script console log ready script