Fast template theme not applied to vertical sliders

[TheoMathurin]

Panel 0.12.1

With Fast templates, the corresponding theme is not applied to sliders when the vertical orientation is set. The slider then has the default Bokeh appearance. I think all sliders are affected.

import panel as pn
import panel.widgets as pnw

horizontal = pnw.FloatSlider(name='Horizontal', value=0, step=0.05, start=0, end=1)
vertical = pnw.FloatSlider(name='Vertical', value=0, step=0.05, start=0, end=1, orientation='vertical')

template = pn.template.FastListTemplate(
    title="FastListTemplate",
    main=[horizontal, vertical]).servable()

[MarcSkovMadsen]

Hi @TheoMathurin

You can use the below css as a workaround. I will make a PR with this.

import panel as pn
import panel.widgets as pnw

CSS = """
.bk-root .noUi-vertical {
  margin-top: 15px;
  width: calc(var(--track-width) * 1px);
  background-color: var(--neutral-outline-rest);
  border-radius: calc(var(--corner-radius) * 1px);
}
.bk-root .noUi-target.noUi-vertical {
    margin-top: 10px;
}
.bk-root .noUi-vertical .noUi-handle {
    border: none;
    width: 12px;
    height: 12px;
    background: var(--neutral-foreground-rest);
    border-radius: calc(var(--corner-radius) * 1px);
    box-shadow: none;
}
"""
pn.config.raw_css.clear()
pn.config.raw_css.append(CSS)
pn.extension()

horizontal = pnw.FloatSlider(name='Horizontal', value=0, step=0.05, start=0, end=1)
vertical = pnw.FloatSlider(name='Vertical', value=0, step=0.05, start=0, end=1, orientation='vertical')

template = pn.template.FastListTemplate(
    title="FastListTemplate",
    main=[horizontal, vertical]).servable()

[TheoMathurin]

Thank you very much for the workaround and the PR!