Make clickable area larger, while keeping sliding line thin?

[mobentec]

We're trying to make the area around the line activate the slider so it can slide left or right. When on a mobile device or even desktop, the mouse has to click exactly on the sliding line for the range to slide.

Researching online, some people suggested creating a transparent div with lots of padding, and having that be the pointer region, giving more cushion to people who don't touch the line (or dot) perfectly. Here is an example: https://stackoverflow.com/questions/46091938/input-range-with-increased-clickable-area.

I was not able to get this solution to work within react-input-range. Your help would be much appreciated!

[Colmea]

Workaround, use the ::before pseudo-element:

.input-range__track--active::before {
    position: absolute;
    content: ' ';
    left: 0;
    right: 0;
    top: -6px;
    bottom: -6px;
  }
}

(all credits to my colleague, BAA).