Vertical Range Sliders

HTML 5 does not provide a native way of displaying a vertical range slider. Instead you have to use CSS to rotate the range slider and associated components.

Note: We are unable to provide support for this code. The code below is experimental and included here for any users who require vertical sliders. Rotated range sliders have cross browser compatibility issues and therefore this code is not part of WS Form core.

To create a vertical slider, add the following custom CSS to your website. It is possible to add this using a WS Form HTML field with the CSS wrapped in <style> tags.

Then edit the range slider field and in the advanced tab enter wsf-range-vertical into the Classes –> Field Wrapper setting.

In the code below you can change the CSS variable --wsf-range-vertical-height (line 2) to any height you wish. It is set to 200 pixels by default.

You may need to adjust the CSS to get the range slider looking as you wish.

.wsf-range-vertical {
    --wsf-range-vertical-height: 200px;
    height: calc(var(--wsf-range-vertical-height) + 20px);
}

.wsf-range-vertical small {
    margin-top: calc(var(--wsf-range-vertical-height) - 20px);
}
    
.wsf-range-vertical input[type=range].wsf-field {
    margin-left: calc(-1 * var(--wsf-range-vertical-height));
    position: relative;
    transform-origin: top right;
    transform: rotate(270deg);
    width: var(--wsf-range-vertical-height);
    z-index: 1;
}

.wsf-range-vertical input[type=range].wsf-field + datalist {
    margin-left: calc(-1 * var(--wsf-range-vertical-height));
    transform-origin: top right;
    transform: rotate(270deg);
    width: var(--wsf-range-vertical-height);
}

.wsf-range-vertical input[type=range].wsf-field + datalist > option {
    margin-left: 27px;
    top: 8px;
}

.wsf-range-vertical input[type=range].wsf-field + datalist > option::after {
    left: calc(50% - 7px);
    transform: rotate(90deg);
}