At the bottom
github.com/TerriaJS/terriajs/blob/next/lib/ReactViews/Map/Legend/DistanceLegend.jsx#L202
barWidth determines width of barStyle. That box is a div, which contains a label and another div. That other div displays the bar using className and style properties. Not sure, but that probably translates to
https://www.w3schools.com/w3css/w3css_progressbar.asp
if not SVG graphics. Progress bars can be set by pixels or % for either width or height.