CSS Code for Range Slider/Selector

Hi there,

I am trying to customize my add-listing page in terms of changing the input values for a certain custom field setting in order to turn it into a range selector aka slider similar to this:

1 min ——–O——- 30 min

Currently, it is in a text box format. I was wondering how would I go about adding a CSS code to the add-listing page to turn a custom field input value from textbox format to range slider/selector format.
See the attached screenshot. Instead of letting businesses to input/type the values (such as 10 min), we would like to use a slider to choose the value and make it easier for our business owners to change that value.

Thanks