Redraw slider after screen resize

[anuragalva]

When screen resizes the slider resizes horizontally and not vertically (no change in the pointer and the bar size) Is there a redraw method I can use to reinitialize slider on screen resize?

[ValentinH]

Hi,

I'm not sure to understand what you mean, could you set up a demo of what you are trying to do? You can fork this one: http://jsfiddle.net/cwhgLcjv/

[anuragalva]

I'm currently trying to create an application where i can resize the slider pointer and the bar if and when the user resizes the Div in which it is kept.

I wanted to know if i there is an attribute which will help me resize the rzslider .rz-bar height and rzslider .rz-pointer width and height during run time.

For Example;
Before Div is expanded:

After expanding it

Currently, I'm Using CSS variables to do this but wanted to know if there is any better method of going about this issue.
document.documentElement.style.setProperty('--pointer-radius', '104px');

html {
--pointer-radius: 64px;
--ipointer-radius: 24px;
}

rzslider .rz-pointer {
width: var(--pointer-radius);
height: var(--pointer-radius);
-webkit-border-radius: calc(var(--pointer-radius) / 2);
-moz-border-radius: calc(var(--pointer-radius) / 2);
border-radius: calc(var(--pointer-radius) / 2);
}

rzslider .rz-pointer:after {
position: absolute;
top: var(--ipointer-radius);
left: var(--ipointer-radius);
}

rzslider .rz-bar {
height: 8px;
}

[ValentinH]

Hi,

There is no option for this but CSS variables seem to be a good option. ;)

[ValentinH]

Closing as there was no answer for a while. Comment to re-open 😉