angular-slider / ngx-slider Goto Github PK
View Code? Open in Web Editor NEWSelf-contained, mobile friendly slider component for Angular based on angularjs-slider
Home Page: https://angular-slider.github.io/ngx-slider/
License: MIT License
Self-contained, mobile friendly slider component for Angular based on angularjs-slider
Home Page: https://angular-slider.github.io/ngx-slider/
License: MIT License
I’m using dynamic components with min and max. When unhidden the sliders are both on zero. I have ngModel showing the values and I’m seeing the correct values of zero and 100. Is there a way to force the slider to update itself?
Hello, thanks for slider.
But I have problem using slider with material dialog. When dialog opened, slider incorrectly updates ceil (example). How fix it?
Is it possible to change option.floor and option.ceil after create component?
Hey @piotrdz, thanks again for the great work, you rock here!
I've just noticed a few bug on the "Custom scale" demo:
It seems that there are 2 demos with the same name but the code example are not matching the examples.
Hi,
is this below mentioned issue also fixed in Angular 5 version of slider ?
angular-slider/angularjs-slider#626
Please confirm or fix that also in this version.
I am displaying a slider where the ticks are nonlinear, example: [35,1,9,15,30,33,50,65,77,99] are the tick values. Depending on the tick value, the tool tip will hold dynamically generated data through use of the ticksTooltip function provided.
I am noticing that some of the tooltips are not displaying any data on hover while some are...I have verified that the data being generated to populate the tool tip at each tick mark is not null, so the data for each tool tip should be there. Has anyone encountered this issue or any suggested fix?
Thanks!!
I have following in an Angular 6 app:
html:
<p>Value: {{sliderControl.value}}</p>
<ng5-slider [options]="options" [formControl]="sliderControl"></ng5-slider>
app.module.ts:
import { Ng5SliderModule } from 'ng5-slider';
component.ts:
import { FormGroup,FormControl } from '@angular/forms';
import { Options,Ng5SliderModule } from 'ng5-slider';
minValue: number = 20;
maxValue: number = 80;
options: Options = {
floor: 0,
ceil: 100,
step:
};
I get following error:
Can't bind to 'formControl' since it isn't a known property of 'ng5-slider'.
If 'ng5-slider' is an Angular component and it has 'formControl' input, then verify that it is part of this module.
If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p>Value: {{sliderControl.value}}</p>
<ng5-slider [options]="options" [ERROR ->][formControl]="sliderControl"></ng5-slider>
Hi, i am trying to use it with reactive forms, but the initial value is not seted and we cannot update the value of the selectedSelectedAllocationIndex while move the spinner:
<div class="col-8" [formGroupName]="i">
<ng5-slider [(value)]="allocation.get('selectedSelectedAllocationIndex').value"
[manualRefresh]="manualRefresh"
[options]="getSliderOptions(i)"></ng5-slider>
</div>
It is better if i can simply add formControlName="selectedSelectedAllocationIndex"
, Like:
<div class="col-8" [formGroupName]="i">
<ng5-slider formControlName="selectedSelectedAllocationIndex"
[manualRefresh]="manualRefresh"
[options]="getSliderOptions(i)"></ng5-slider>
</div>
but it is not documented or not implemented. Any idea?
Hi there,
great job! Was wondering if it's possible to have html in the legend as well?
In the example https://angular-slider.github.io/ng5-slider/demos#custom-legend-function-slider if I modify the getLegend function to return html it won't be rendered.
Thanks!
the demo https://angular-slider.github.io/ng5-slider/#user-events-slider shows
userChange event.
but cannot import 'ChangeContext'.
ERROR in src/app/booking-lot/booking-modals.component.ts(6,30): error TS2305: Module '"E:/dev/xcar/backend/node_modules/ng5-slider/ng5-slider"' has no exported member 'ChangeContext'.
Add unit tests testing:
Some of these should also be e2e tests, making sure that the component works in realistic scenarios.
Existing tests from angular-slider project can be used as a template.
Based on Slider with dates example in the docs, if I try to move from date range index manually, even though index and value match to one of the values in the date range it doesn't update correctly.
I've already tried to use setTimeout approach and manualRefresh.emit() one too. The only way I've seen it actually update the value correctly is by toggling it with an *ngIf, which causes the illusion of blinking and it's not desirable.
Here's my code:
setUpDates() {
this.dateRange = this.createRange();
this.minValue = this.dateRange[15].getTime();
this.currentTickIndex = 15;
// this.maxValue = this.dateRange[29].getTime();
this.options = {
stepsArray: this.dateRange.map((date: any) => {
return { value: new Date(date).getTime() };
}),
translate: (value: number): string => new Date(value)
.toLocaleTimeString('en-GB', { hour12: true, hour: '2-digit', minute: '2-digit' })
};
}
createRange(): Date[] {
const dates: Date[] = [];
const start = moment(this.date).add(-15, 'minutes');
for (let i = 0; i <= 30; i++) {
dates.push(new Date(start.year(), start.month(), start.day(), start.hours(), start.minutes() + i));
}
return dates;
}
onChange(e: any) {
this.currentTickIndex = this.options.stepsArray.findIndex(item => item.value === e.value);
}
moveTick(index) {
this.currentTickIndex += index;
if (this.currentTickIndex < 0) {
this.currentTickIndex = 0;
} else if (this.currentTickIndex > 30) {
this.currentTickIndex = 30;
}
// this.minValue = this.dateRange[this.currentTickIndex].getTime();
this.minValue = this.options.stepsArray[this.currentTickIndex].value;
// this.hideSlider = true;
setTimeout( () => {
this.options = Object.assign({}, this.options);
this.manualRefresh.emit();
});
// this.hideSlider = false;
}
Any hint would be very appreciated.
Thanks in advance.
Hello,
Quickie.. How can I change or add css attributes on the ng5-slider directive.. For example, I want to move the labels to the opposite side of slider. I can't find css in the library.. Thanks.
The new function normaliseLowValue() does not take into account the Options.stepsArray field. So changing the slider value (without interacting with the graphical element) moves the slider always at the beginning of bar.
Once integrated the ng5-slider I'm getting a lot of event listener violation messages within Chrome console .
zone.js:1666 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
The slider is used like this:
<ng5-slider [value]="port.speed" [options]="defaultOptions" (userChangeEnd)="onSpeedChange($event,port)"></ng5-slider>
defaultOptions: Options = {
floor: 0,
ceil: 255,
step: 1,
noSwitching: true
};
Is this expected behavior?
options: Options = {
floor: 0,
ceil: 0
}
setTimeout(()=>{
this.options.ceil = 300; // i want to change it later
})
I did not understand even by looking at the document.
Hi,
Thanks for the ng5-slider.
Here is the current configurations:
this.options = { onlyBindHandles: true, showSelectionBar: true, stepsArray: this.products.map(x => { return { value: x.maxCover } }), // translate: (value: number): string => { // return 'R' + this.products.find(x => x.maxCover === value).maxCover.toString(); // } };
This is what I have:
This is what i am trying to achieve:
I am struggling with the following:
Thanks in advance!
Hi
We use AOT compilation and become these failure while building our project:
Directive ɵn, Property 'sliderElementVerticalClass' is private and only accessible within class 'SliderComponent'.
Directive ɵn, Property 'sliderElementDisabledAttr' is private and only accessible within class 'SliderComponent'.
The Problem would be solved, if you change the @HostBindings within the SliderComponent from private to public.
@HostBinding('class.ng5-slider-vertical')
**public** sliderElementVerticalClass: boolean = false;
@HostBinding('attr.disabled')
**public** sliderElementDisabledAttr: string = null;
Could you change this?
Thank you for your great work!
Daniel
Expected behavior
It should never be possible to slide slider past ceil value.
Observed behavior
When ceil is a decimal, it is possible to slide slider past ceil value.
Steps to reproduce
https://stackblitz.com/edit/ng5-slider-simple-slider-example-2dvpoo
Click on slider pointer and drag to the right. With pointer at far right of slider, move mouse around while still holding mouse down. Text showing slider value will move between 9.5 and 10 depending on where you put your mouse.
Browsers creating issue
Google Chrome 70.0.3538.77
Firefox 63.0.1
Safari 11.0.3
ng5-slider versions
I've only checked ng5-slider v. 1.1.1 and 1.1.6 and both create the issue.
I put ng5-slider to dynamic popup bootstrap popup. When i open popup i assign ceil value to slider. But it's not taking. When i change slider value then it will show value.
<ng-template #content let-modal>
<ng5-slider [(value)]="CurrentObj.Selection" [options]="options" ></ng5-slider>
</ng-template>
On model open i assign value to slider like
onDrop(dropData: DropEvent<String>, period, passday): Boolean {
const day = (passday === 1) ? this.Day : passday;
if (!this.postobject.ActivityId) {
alert('Please select activity.');
return false;
}
const capacity = dropData['GroupCapacity'];
if (parseInt(capacity, 10) > 0) {
this.open(this.content);
this.CurrentObj.GroupName = dropData['GroupName'];
this.CurrentObj.GroupIndex = this.groupslist.map((o) => o.Id).indexOf(dropData['Id']);
this.options = {floor: 0, ceil: capacity};
this.CurrentObj.Selection = 0;
this.CurrentObj.period = period;
this.CurrentObj.day = day;
this.CurrentObj.capacity = dropData['GroupCapacity'];
console.log(this.CurrentObj);
} else {
alert('This group is full');
}
}
Perhaps I missed it, but I'm not seeing any documented events from the slider. After reviewing the code I do see some events emitted. I'm only looking to check if the slider values have been changed by the user, "dirty". I am wondering whether it's safe to use the valuechanged and highValueChanged events? Perhaps you have another recommendation?
Hi there,
Is there a way to only allow the user to slide the slider by only using the button and not via clicking on the slider itself.
Thanks
Hi
I am looking for different line colors above and below the range slider.
found a similar request on angularjs implementation. angular-slider/angularjs-slider#523
Hi
In short... I'm using
"@angular/core": "^6.1.1", "typescript": "~2.7.2", "ng5-slider": "^1.1.4",
This type of code is not working any more: https://angular-slider.github.io/ng5-slider/#custom-html-display-function-slider
I'm actually try to put something like this
<img src="${image}" alt="" />``
But example with <b>
tag just shows up as a plain text. Let me know If you need any extra feedback.
Thanks in advance.
Is there a refresh method which must be invoked for the minimum and maximum values to be set for the range slider? If I adjust the window the value gets set on the view.
With version 1.1.4 I get the above error. However, with version 1.1.3 I have no issues.
In the option 'ticksTooltip', I want to return a dynamically created HTML template. Any way to achieve it?
Hi there,
first of all many thanks for your great work! I really enjoy your slider component, its great!
Lately I was creating a pushRange slider with the ng5-slider which had a step range of 0.1 and the precision parameter set to 1. I also added Textinputs to modify the values directly. Everything works like a charm except for one case. Wen I slide on pointer and the minimum range with is reached I start to push the range. Thats what I want and what the feature is. But sometimes I get some dirty numbers with very long decimals. You can see it in the attached screenshot.
Maybe it's a javascript rounding error and you can fix it with toFixed(number of precision)
or something similar?
Thanks again a lot,
Matthias
Hi,
as I'm using angular 6 I'm gettings warnings with the new version as it requires angular 5.
Is there a possibility for an upgrade?
regards
Robert
Write details of what will be changed in future and what will remain the same.
Originally posted by @dexbytesmanish in #29 (comment)
I'm always getting NaN on minimum price and maximum, If the tow value s comes from a HTTP response. Maybe I should show the value asynchronsly any way.
This my component:
export class PriceFilterComponent implements OnChanges {
@Input() floor;
@Input() ceil;
@Output() eventEmitterFilter = new EventEmitter<{}>();
min: any;
max: any;
options: Options;
ngOnChanges() {
console.log(this.max); //undifined then NaN
if (this.floor && this.ceil) {
console.log(this.max); // NAN
this.max = Number(this.ceil.toFixed(0)) || 0;
this.min = Number(this.floor.toFixed(0)) || 0;
this.options = {
floor: this.floor,
ceil: this.ceil,
showSelectionBar: true,
selectionBarGradient: {
from: 'white',
to: '#007bff'
},
showOuterSelectionBars: true,
translate: (value: number, label: LabelType): string => {
return value + '€';
}
};
}
}
filter() {
this.eventEmitterFilter.emit({'ceil': this.max, 'floor': this.min});
}
}
This is the html side:<ng5-slider class="custom-slider" [(value)]="min" [(highValue)]="max" [options]="options" ></ng5-slider>
This a link for a deployed app Online demo, and the part of code source could be found here.https://github.com/ahmed-bhs/angular6-demo/blob/master/src/app/article/price-filter/price-filter.component.ts
Hi! First of all, the lib is awesome!
I'm trying to do this:
And for now I was able to do it this way. (i use css, that why that much ng-deep)
::ng-deep .custom-slider .ng5-slider .ng5-slider-bar {
color: #FAFAFA;
height: 2px;
background: linear-gradient(to right, #2ecb6f 50%, #e74c3c 50%);
background-repeat: no-repeat;
}
::ng-deep .custom-slider .ng5-slider .ng5-slider-selection {
background: rgb(255, 230, 0);
}
But if the lowest value is higher than 50% then the user will see the color red, and that's not what I need, I just need the left side of the lowest value in green, the selection range in yellow and the right side of the highest value in red, and I don't know if I can accomplish this with options like gradient selection or something like that.
If you think this is not an issue, close it without problems and I see how to do this, thank you anyway.
Please try this example and see the ticker.
https://stackblitz.com/edit/ng5-slider-simple-slider-example-azi4cj
step1: click 'days' button,ticker will show value=1 (correct)
step2: click 'limits' button,ticker will show value=3 (correct)
step3: again step1 (fails)
Hi,
I have a view where I have to display 480 sliders (120 rows with 4 sliders each).
Once the view is rendered it looks nice and every slider can be used without any delay.
But the rendering process takes als 5-7 seconds, which is not really acceptable.
In the console log I see again some violation issues:
[Violation] 'message' handler took 5208ms
[Violation] Forced reflow while executing JavaScript took 4087ms
---
[Violation] 'click' handler took 11076ms
[Violation] Forced reflow while executing JavaScript took 6416ms
[Violation] 'resize' handler took 15084ms
[Violation] Forced reflow while executing JavaScript took 2992ms
As I need only a simple layout, I already tried to disable all possible options.
defaultOptions: Options = {
floor: 0,
ceil: 255,
step: 1,
noSwitching: true,
hideLimitLabels: true,
hidePointerLabels: true,
showOuterSelectionBars: false,
showSelectionBarEnd: false,
showSelectionBar: false,
showTicksValues: false
};
Is there more I can tweak?
No matter what style i want to overwrite, i need to add !important
to it:
styles.scss
.ng5-slider-pointer {
background-color: $primary!important;
}
In the AngularJS library that this library is based on, there was a way to set a custom template on the slider via an rz-slider-tpl-url
directive.
<rzslider ...
rz-slider-tpl-url="path/to/template.html">
Is there a way to do this in this library/is this a planned feature for this library? The documentation doesn't seem to say anything about this functionality.
In my reactive form data structure I have 2 separate FormControls for my "value" and "highValue", to be able to attach them to 2 input fields so that the user can write both separately. The slider however only accepts 1 array of a "value" and "highValue", which means that binding the values seperately is not possible with this approach, and the slider cannot get synchronized with 2 input fields. Is there another way to bind 2 form controls to the slider, and if not would it be possible to add that functionality in the future? (Maybe turn the [value, highValue] array into a FormArray with 2 FormControls?)
I have followed the simple example, but when i launch the app, the slider is not displayed and appears this error in console:
Can't bind to 'value' since it isn't a known property of 'ng5-slider'.
1. If 'ng5-slider' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <h3 class="taxonomy-filter-title">PRICE</h3>
<div class="row">
<ng5-slider [ERROR ->][(value)]="lowValue" [(highValue)]="highValue" [options]="options"></ng5-slider>
</di"): ng:///StoreListingModule/ProductsListingPageComponent.html@90:24
Can't bind to 'highValue' since it isn't a known property of 'ng5-slider'.
1. If 'ng5-slider' is an Angular component and it has 'highValue' input, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("omy-filter-title">PRICE</h3>
<div class="row">
<ng5-slider [(value)]="lowValue" [ERROR ->][(highValue)]="highValue" [options]="options"></ng5-slider>
</div>
</div>
"): ng:///StoreListingModule/ProductsListingPageComponent.html@90:45
Can't bind to 'options' since it isn't a known property of 'ng5-slider'.
1. If 'ng5-slider' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("3>
<div class="row">
<ng5-slider [(value)]="lowValue" [(highValue)]="highValue" [ERROR ->][options]="options"></ng5-slider>
</div>
</div>
"): ng:///StoreListingModule/ProductsListingPageComponent.html@90:71
'ng5-slider' is not a known element:
1. If 'ng5-slider' is an Angular component, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<h3 class="taxonomy-filter-title">PRICE</h3>
<div class="row">
[ERROR ->]<ng5-slider [(value)]="lowValue" [(highValue)]="highValue" [options]="options"></ng5-slider>
"): ng:///StoreListingModule/ProductsListingPageComponent.html@90:12
Error: Template parse errors:
Can't bind to 'value' since it isn't a known property of 'ng5-slider'.
1. If 'ng5-slider' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <h3 class="taxonomy-filter-title">PRICE</h3>
<div class="row">
<ng5-slider [ERROR ->][(value)]="lowValue" [(highValue)]="highValue" [options]="options"></ng5-slider>
</di"): ng:///StoreListingModule/ProductsListingPageComponent.html@90:24
Can't bind to 'highValue' since it isn't a known property of 'ng5-slider'.
1. If 'ng5-slider' is an Angular component and it has 'highValue' input, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("omy-filter-title">PRICE</h3>
<div class="row">
<ng5-slider [(value)]="lowValue" [ERROR ->][(highValue)]="highValue" [options]="options"></ng5-slider>
</div>
</div>
"): ng:///StoreListingModule/ProductsListingPageComponent.html@90:45
Can't bind to 'options' since it isn't a known property of 'ng5-slider'.
1. If 'ng5-slider' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("3>
<div class="row">
<ng5-slider [(value)]="lowValue" [(highValue)]="highValue" [ERROR ->][options]="options"></ng5-slider>
</div>
</div>
"): ng:///StoreListingModule/ProductsListingPageComponent.html@90:71
'ng5-slider' is not a known element:
1. If 'ng5-slider' is an Angular component, then verify that it is part of this module.
2. If 'ng5-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<h3 class="taxonomy-filter-title">PRICE</h3>
<div class="row">
[ERROR ->]<ng5-slider [(value)]="lowValue" [(highValue)]="highValue" [options]="options"></ng5-slider>
What this might be?
Error in Safari and Firefox:
"ReferenceError: Can't find variable: TouchEvent"
When trying to move the slider by only clicking a tick (or a tick value) the slider (most of the time) doesn't respond to the click events as expected. It is kind of hard to explain so I created a video of it:
It also happens on the example page (for example this one and this one)
I've tested on both a Mac in Chome (70), Firefox (63) and Windows in Edge (38)
The problem doesn't occur on Windows in IE (11)!
Hi,
I am ng5-slider to accommodate a range of -something to +something, however, this something value is what I a get from the HTTP service call. So based on the example I used [(value)]="minValueVariable" and [(highValue)]="maxValueVariable" but for the step what value should i provide current the step value is 5.0 .So the negative value is directly moved to 0 and then the positive one works fine with the stepping.
Can you please look into this one and provide an update on the same.
Warm regards,
Jigar
Hello,
When using a ticked slider (showTicks: true
) and a touch interface (either a real touchscreen or Google Chrome "device toolbar"), touching precisely on the tick itself does not emit the userChangeEnd
event. Touching on the bar or the handle works as expected.
Hiding the .ng5-slider-tick
elements, even through CSS with display: none
"fixes" this and emit the event properly.
Here is a forked Stackblitz to reproduce: https://stackblitz.com/edit/ng5-slider-simple-slider-example-4na3bk. Don't forget to open developments tools then "device toolbar" to emulate touch events.
Tested on Chrome Android and Chrome Desktop emulating touch screen.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.