Vertical slider

Hello its me again. This time with another Question about widget coding.

Im using the custom widget to choose color with a brightness slider for my lamps and i want them to be vertical.

<div ng-init='picker = { "name": config.name, "item": config.color, "style": "aCKolor" };slider = { "name": "", "item": config.brightness, "floor": 0, "ceil": 100, "step": 1, "unit": "", "vertical": true <p>};switch = {<br> “name”: “”,<br> “item”: config.brightness,<br> “hidelabel”: true,<br> “hideicon”: false,<br> “hideonoff”: true<br> }'>

.cl-switch .switch {
position: absolute;
top: 0;
width: 100%;

	}
</style>
<widget-colorpicker ng-model="picker"></widget-colorpicker>
<widget-slider ng-model="slider"></widget-slider>

<div ng-init="setpointmodel={ 
            name: 'Setpoint', 
            item: config.brightness, 
            floor: 0, 
            ceil: 100, 
            step: 1,
            hidelabel: true,
            unit: '%',
           
            
            }">

this is the code for the custom widget. I changed the “vertical” tag at the beginning to “true”, but ended with a vertical slider, that ist way to short.

I searched the internet, and found a solution here in this community:

but I dont know where to put this piece of code:

<style>
div.slider-div {
  height:400px;
  width: 40px;
} 
</style>

Ive tried different positions in the code, but it doesnt work.

Can someone please send the changed code?