tb / ng2-nouislider

Angular2 noUiSlider directive
http://tb.github.io/ng2-nouislider/
MIT License
184 stars 114 forks source link

vertical support? #62

Open ronlawrence3 opened 7 years ago

ronlawrence3 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 6 years ago

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

artaniszeratul commented 5 years ago

@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 commented 5 years ago

@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;
    }
}