npnm / npnslider Goto Github PK

The sliders do not seem to work on Chrome using Android.

Quite often - slider point doesn't follow to mouse poiner and when I move mouse, point moves quite far from pointer ...

Can you please add documentation how to change the style of the slider ?

Hi Nupin,

When I use [min]=0, the slider is not working at the first load.

Here is the example I am using:
<npn-slider [min]="0" [max]="24" disabled="{{!filtersEnabled}}" [showStepIndicator]="true" (onChange)="onHourChangeEnd($event)"> </npn-slider>

Please advise.

Describe the bug
A clear and concise description of what the bug is.

can we migrate this to latest version of Angular

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

*Additional context
.scss file -
.custom-slider{
&.npn-slider{
.slider{
.bar{
height: 30px;
}
}
}
}

.html file -
<npn-slider class="custom-slider" [min]="18" [max]="90" [hide-values]="true" (onChange)="onSliderChange($event)" showStepIndicator=true
[minSelected]=25 [maxSelected]=60 [step]="1" [showStepIndicator]="true">

Hi,

My slider points don't move drag, its like the drag event not exists, no errors on console.

CODE:

<npn-slider [min]="1980" [max]="2019" (onChange)="onSliderChange($event)">

Obs: NpnSliderModule imported on AppModule

AnyHint?

What shall i import and where, to get rid of this error?

Describe the bug
The slider is not keyboard accessible.

To Reproduce
Steps to reproduce the behavior:

1. Go to the slider demo page
2. Press the tab key
3. The slider does not get the focus

Expected behavior
The slider gets the focus and follows a11y guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role

Desktop (please complete the following information):

• Tested on Desktop Chrome Browser

The Slider uses Browser Module instead of Common Module and thus throws below error

Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. BrowserModule@http://localhost:4200/vendor.js:67606:28 _createClass@http://localhost:4200/vendor.js:47231:28 createProviderInstance@http://localhost:4200/vendor.js:47203:38 initNgModule@http://localhost:4200/vendor.js:47136:55 NgModuleRef@http://localhost:4200/vendor.js:47862:21 createNgModuleRef@http://localhost:4200/vendor.js:47851:28 http://localhost:4200/vendor.js:71474:40 _next@http://localhost:4200/vendor.js:126370:39 next@http://localhost:4200/vendor.js:121084:23 http://localhost:4200/vendor.js:131858:32 onInvoke@http://localhost:4200/vendor.js:42637:39 run@http://localhost:4200/polyfills.js:2472:49 http://localhost:4200/polyfills.js:3211:37 onInvokeTask@http://localhost:4200/vendor.js:42628:43 runTask@http://localhost:4200/polyfills.js:2517:57 drainMicroTaskQueue@http://localhost:4200/polyfills.js:2923:42 promiseReactionJob@[native code]