vertical support?

[ronlawrence3]

I've been trying to create a nouislider with a vertical orientation, but the handles seem to be stuck at 0. My config looks like:

someRange=[5,95];
sideSlideConfig = {
    connect: true,
    start: [5,95],
    range: {
      min: 0,
      max: 100
    },
    pips: {
      mode: 'steps',
      stepped: true,
      density: 2,
      values: 100
    },
    orientation: 'vertical'
  };

<nouislider [config]="sideSlideConfig" [(ngModel)]="someRange"></nouislider>

[Sariq]

Set dimensions..Vertical sliders don't assume a default height, so you'll need to set one. You can use any unit you want, including % or px.

[vicatcu]

To help other lost souls, specifically I had to set the height css attribute for class "noUi-vertical" to get this to work. Notably, setting the height css rule on the nouislider element itself didn't work, feels like there should be some way in angular for that to work as such.

[mtclark0518]

@vicatcu thank you! I had to set the .noUi-vertical height value in the top level global styles.css for this to work.

[artaniszeratul]

@vicatcu thank you! I had to set the .noUi-vertical height value in the top level global styles.css for this to work.

would you mind posting the css here? cheers!

[riscie]

@artaniszeratul

In your global stylesheet (styles.[s]css)

    .noUi-vertical {
        height: 400px;
    }

You could also use ng-deep, but it will go away and browser-support is declining at this point, so I would advice against it in the general case.

In your components [s]css

::ng-deep {
    .noUi-vertical {
        height: 400px;
    }
}