Customization of slider knob

[bob9999]

Hi there. This component works great. Just a quick note that your on-line demo throws an access violation when you try to move the slider for the room reservation part. I think it is when you are trying to change the dropdown item index.

Is there a HTML tag that we can use to change how the knob looks on the slider for CSS? I wanted to have this a little larger and a circle instead of square and the rounded corners that is the default. I looked through the code that renders in the browser and I cannot see anything in CSS that I can latch into to customize this.

I will weed through the theme CSS to see if I can figure out from here but I wanted to pose the question here. One thing that would be nice in the documentation (unless I missed something) is to list the HTML tags that are used for each component that can be used to customize. I find that 80+% of my time is trying to figure out what each one is using and then from here I am in safe CSS territory.

Cheers!

[bob9999]

Hi there. Just to add more information here for anyone looking to customize this, I found "ui-slider-handle" that allows access to the slider knob shape. The css code below will allow to change the knob to any radius and in my case a circle. As usual, remember to set the CSS property of the slider so this code will work for you.

.Slider .ui-slider-handle {
border-radius: 25px ;
}

Overriding colors is proving a bit of a challenge. I traced to .ui-state-default that has this but I cannot seem to override the theme setting for this. For my project, I can get away with the theme default for colours so I will just leave this for now.

I just wanted to add to the thread here on my findings for customizing the knob shape.

Cheers!

[Alexander Bulei]

Hi,
Same answer as for accordion.

Best Regards.

[bob9999]

Thank you alexander. My client is happy where I am at so all is good. Cheers!