Is it possible to style the slider thumb on baseinputnumber?

[mdubb86]

Hi! I'm wondering if it is possible to style the slider thumb on input number widget?

The circular thumb is small and hard to grab on a touchscreen. The only way I've found of increasing the size is adding a CSS rule to baseinputnumber.css

.widget-baseinputnumber-{{id}} input[type=range]::-webkit-slider-thumb {
...
}

Is there a better way to do this or could we possibly have a slider_thumb_style variable similar to slider_style available in the Dashboard file?

Thanks!

[ReneTode]

it will be easier to grasp if you change the container style and make it bigger. you can use the slider_style to change the appearance from the slider. i think its possible to change the slider thumb with something like:

slider_style: "-webkit-slider-thumb {height: 25px};"

[acockburn]

Let me know if Rene addressed your issue

[mdubb86]

Thanks for the help guys.

Changing the size of the slider and the container using the provided variables works great, results in something like this for me:

Unfortunately on my iPad that slider thumb is still just as hard to grab and slide.

When I adjust the size using the CSS I referenced above, I get something like this:

Once I do that, it is much easier to grab on the iPad.

I don't think it is possible to reference CSS pseudo-elements as an inline CSS rule in the parent element as Rene suggested - I tried in slider_style and just in devtools and wasn't able to get it to work (invalid CSS)

Unfortunately, because it is a pseudo-element and not actually explicitly defined in the base HTML, I'm not sure how a variable similar to slider_style could even be added (as there is no place in the HTML to put the template placeholder).

Is there is a way of loading an additional stylesheet or javascript without creating my own theme or widget?

Thanks again for your help!

[ReneTode]

no if you want to change/add css to the skin (theme) you need to use the skin files. you can edit the default skin by adding a directory "default" to your custom_css directory and copy the skinfiles there. but if you do that be aware that your system wont recognise any future updates on the default skin. same thing for a custom widget.

the problem with sliders are not easy to solve. all browsers handle them extremely different, and its very hard to create a way to set just that part through the yaml. i think we need to let this issue opened, because i might know a way to change that particular css part through javascript, but i need to test that.