I would like the thumb part of a range input to be equal to 1/max, ie: if the max number for the range input is 5 then I want the thumb to be 1/5th of the width. I am using TailwindCSS but I used plain CSS to modify the thumb to look how I want it to look but I can't figure out how to dynamically change the width based on a variable. There are multiple range inputs so I cannot use CSS variables and the max for each is always different so I can't hard code them in either. If someone knows how to do this by using either Tailwind or plain CSS I would greatly appreciate it.

Thanks in advance.