I have made it,
but I am not really satisfied with it, because the bar is to short and the shadows to big.
Github doesn't seem to upport SVGs so :
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="76" height="66" version="1.1" id="svg85" sodipodi:docname="slider.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1366" inkscape:window-height="709" id="namedview87" showgrid="false" inkscape:zoom="6.5685523" inkscape:cx="43.618859" inkscape:cy="-5.1498519" inkscape:window-x="0" inkscape:window-y="30" inkscape:window-maximized="1" inkscape:current-layer="svg85" inkscape:document-rotation="0" /> <metadata id="metadata2"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title /> </cc:Work> </rdf:RDF> </metadata> <defs id="defs9"> <radialGradient id="radialGradient915" cx="41" cy="20" r="16" gradientUnits="userSpaceOnUse"> <stop offset="0" id="stop4" /> <stop stop-opacity="0" offset="1" id="stop6" /> </radialGradient> <radialGradient inkscape:collect="always" xlink:href="#radialGradient915" id="radialGradient89" gradientUnits="userSpaceOnUse" cx="41" cy="20" r="16" /> <radialGradient inkscape:collect="always" xlink:href="#radialGradient915" id="radialGradient91" gradientUnits="userSpaceOnUse" cx="41" cy="20" r="16" /> <radialGradient inkscape:collect="always" xlink:href="#radialGradient915" id="radialGradient93" gradientUnits="userSpaceOnUse" cx="41" cy="20" r="16" /> </defs> <g id="vertical-slider-handle" transform="matrix(1.25,0,0,1.25,-31.25,-5)" stroke-width="0.91667"> <rect x="25" y="4" width="32" height="32" opacity="0" id="rect11" /> <circle cx="41" cy="20" r="16" fill="url(#radialGradient915)" opacity="0.05" stroke-width="1.8333" id="circle13" style="fill:url(#radialGradient93)" /> <circle cx="41" cy="20" r="9.3332996" opacity="0.1" stroke-width="1.0694" id="circle15" /> <circle cx="41" cy="20" r="8" fill="#ffffff" id="circle17" /> </g> <g id="vertical-slider-hover" transform="matrix(1.25,0,0,1.25,-6.292138,-4.9499641)" stroke-width="0.91667"> <circle cx="41" cy="20" r="16" fill="url(#radialGradient915)" opacity="0.15" stroke-width="0.91667" id="circle20" style="fill:url(#radialGradient91)" /> <rect x="25" y="4" width="32" height="32" opacity="0" id="rect22" /> <circle cx="41" cy="20" r="9.3332996" opacity="0.15" stroke-width="0.53472" id="circle24" /> <circle cx="41" cy="20" r="8" fill="#ffffff" id="circle26" /> </g> <g id="vertical-slider-focus" transform="matrix(1.25,0,0,1.25,18.357382,-5.3416502)" stroke-width="0.91667"> <circle cx="41" cy="20" r="16" fill="url(#radialGradient915)" opacity="0.2" stroke-width="0.91667" id="circle29" style="fill:url(#radialGradient89)" /> <rect x="25" y="4" width="32" height="32" opacity="0" id="rect31" /> <circle cx="41" cy="20" r="9.3332996" opacity="0.15" stroke-width="0.53472" id="circle33" /> <circle cx="41" cy="20" r="8" fill="#ffffff" id="circle35" /> </g> <g id="groove-topleft" transform="matrix(2,0,0,2,-1,18)"> <path d="m 7,-24 c -3.3644,0 -6,2.6356 -6,6 h 6 z" opacity="0.13" stroke-width="5.9416" id="path38" /> <path d="m 7,-24 c -3.3644,0 -6,2.6356 -6,6 h 1 c 0,-2.8037 2.1963,-5 5,-5 z" opacity="0.06" id="path40" /> </g> <rect id="hint-tile-center" x="-29.437119" y="-13.186604" width="24" height="24" rx="0" ry="24" fill="#4e9a06" stroke-width="12" /> <path id="groove-center" d="m 13,-18 v 1 h 6 v -1 z" opacity="0.13" stroke-width="2.44942" /> <circle id="hint-handle-size" cx="57" cy="-3" fill="#ff2a2a" style="stroke-width:1.99999" r="24" /> <g id="groove-highlight-top" transform="matrix(2,0,0,2,-23,29)"> <path d="m 23,-24 v 6 h 3 v -6 z" opacity="0" stroke-width="4.2426" id="path46" /> <path d="m 23,-23 v 5 h 3 v -5 z" fill="#ffffff" stroke-width="3.873" id="path48" /> </g> <g id="groove-highlight-topleft" transform="matrix(2,0,0,2,-23,18)"> <path d="m 23,-24 c -3.3644,0 -6,2.6356 -6,6 h 6 z" opacity="0" stroke-width="5.9416" id="path51" /> <path d="m 23,-23 c -2.8037,0 -5,2.1963 -5,5 h 5 z" fill="#ffffff" stroke-width="4.9513" id="path53" /> </g> <path id="groove-highlight-center" d="m 23,-18 v 1 h 6 v -1 z" fill="#ffffff" stroke-width="2.44942" /> <g id="groove-highlight-left" transform="matrix(2,0,0,1,-23,0)"> <path d="m 17,-18 v 1 h 6 v -1 z" opacity="0" stroke-width="2.4494" id="path57" /> <path d="m 18,-18 v 1 h 5 v -1 z" fill="#ffffff" stroke-width="2.236" id="path59" /> </g> <g id="groove-top" transform="matrix(2,0,0,2,-1,18)"> <path d="m 7,-24 v 6 h 3 v -6 z" opacity="0.13" stroke-width="4.2426" id="path62" /> <path d="m 7,-24 v 1 h 3 v -1 z" opacity="0.06" stroke-width="1.732" id="path64" /> </g> <g id="groove-left" transform="matrix(2,0,0,1,-1,0)"> <path d="m 1,-18 v 1 h 6 v -1 z" opacity="0.13" stroke-width="2.4494" id="path68" /> <path d="m 1,-18 v 1 h 1 v -1 z" opacity="0.06" stroke-width="0.99997" id="path70" /> </g> <use id="groove-right" transform="matrix(-1,0,0,1,38,0)" width="100%" height="100%" xlink:href="#groove-left" x="0" y="0" /> <use id="groove-bottomleft" transform="matrix(1,0,0,-1,0,-35)" width="100%" height="100%" xlink:href="#groove-topleft" x="0" y="0" /> <g id="g142" transform="translate(-39.85664,3.3262)"> <use id="groove-bottomright" transform="rotate(180,38.92832,-19.1631)" width="100%" height="100%" xlink:href="#groove-topleft" x="0" y="0" /> <use id="groove-bottom" transform="matrix(1,0,0,-1,45.85664,-38.3262)" width="100%" height="100%" xlink:href="#groove-top" x="0" y="0" /> </g> <use id="groove-highlight-topright" transform="matrix(-1,0,0,1,52.000001,0)" width="100%" height="100%" xlink:href="#groove-highlight-topleft" x="0" y="0" /> <use id="groove-highlight-bottomleft" transform="matrix(1,0,0,-1,0,-35)" width="100%" height="100%" xlink:href="#groove-highlight-topleft" x="0" y="0" /> <use id="groove-highlight-bottomright" transform="matrix(0,-1,-1,0,11.000001,6)" width="100%" height="100%" xlink:href="#groove-highlight-topleft" x="0" y="0" /> <use id="groove-highlight-bottom" transform="matrix(1,0,0,-1,1e-6,-35)" width="100%" height="100%" xlink:href="#groove-highlight-top" x="0" y="0" /> <use id="groove-highlight-right" transform="matrix(-1,0,0,1,52.000001,0)" width="100%" height="100%" xlink:href="#groove-highlight-left" x="0" y="0" /> <use id="horizontal-slider-handle" transform="translate(0,30)" width="100%" height="100%" xlink:href="#vertical-slider-handle" /> <use id="horizontal-slider-hover" transform="translate(0.04213767,29.949964)" width="100%" height="100%" xlink:href="#vertical-slider-hover" x="0" y="0" /> <use id="horizontal-slider-focus" transform="translate(0.39261803,30.34165)" width="100%" height="100%" xlink:href="#vertical-slider-focus" x="0" y="0" /> <g id="g94" transform="translate(-54.173291,7.999447)"> <use id="groove-topright" transform="matrix(-1,0,0,1,92.173291,-7.999447)" width="100%" height="100%" xlink:href="#groove-topleft" x="0" y="0" /> <g id="groove-top-3" transform="matrix(2,0,0,2,59.173291,10.000553)"> <path d="m 7,-24 v 6 h 3 v -6 z" opacity="0.13" stroke-width="4.2426" id="path62-6" /> <path d="m 7,-24 v 1 h 3 v -1 z" opacity="0.06" stroke-width="1.732" id="path64-7" /> </g> </g> <use id="groove-bottom-5" transform="matrix(1,0,0,-1,0,-35)" width="100%" height="100%" xlink:href="#groove-top" x="0" y="0" /> </svg>