angular-slider / ngx-slider Goto Github PK

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.

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

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?

When I tried to build a production version of my app it's creating error ...

If possible please remove the dependency from slider library.. and publish the update

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.

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');
        }
     }

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?

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:

https://youtu.be/L0krQc9KpLM

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)!

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?

Originally posted by @dexbytesmanish in #29 (comment)

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

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.

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:

• The legend is appearing above the slider, why is that? I saw in your examples where the legend is below which is why i chose to use the legend as opposed to the normal 'tickValues'

Thanks in advance!

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.

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.

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?)

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?

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.

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.

Good day sir!

I Just want to ask if the module have a support on ionic 3

i want to use it ng5-slider on my ionic app inside the ion-list -> ion-items

Put this vertical ng5-slider

Here at the rightmost part

To be look like this

any help will be appreciated.
Thanks

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

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
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.

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.

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'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 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
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

can you please help me implementing the same on angular 5+

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!

Is it possible to change option.floor and option.ceil after create component?

No matter what style i want to overwrite, i need to add !important to it:

styles.scss

.ng5-slider-pointer {
    background-color: $primary!important;
}

Write details of what will be changed in future and what will remain the same.

As you can see in the image above the range slider is not displaying correctly. It's placed in a bootstrap dropdown nav. When I copy and paste it somewhere else it looks fine. Any idea how to fix this?

This is how it should look like.

• add more details in README.md
• refactor demo app to show code snippets in addition to results
• publish demo app on Github pages
• generate and publish API docs

With version 1.1.4 I get the above error. However, with version 1.1.3 I have no issues.

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?

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.

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'.

1. If 'ng5-slider' is an Angular component and it has 'formControl' 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. ("

      <p>Value: {{sliderControl.value}}</p>
      <ng5-slider [options]="options" [ERROR ->][formControl]="sliderControl"></ng5-slider>
   

Error in Safari and Firefox:

"ReferenceError: Can't find variable: TouchEvent"

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.

Add unit tests testing:

• static slider behaviour with different options - slider should be rendered with elements positioned properly
• dynamic slider behaviour - slider should react correctly to resize, keyboard, mouse and touch events

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.

Hello, thanks for slider.
But I have problem using slider with material dialog. When dialog opened, slider incorrectly updates ceil (example). How fix it?

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)

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?

In the option 'ticksTooltip', I want to return a dynamically created HTML template. Any way to achieve it?

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'.

I tried with the latest version 1.1.9, clear the max value in the input box and try to type a new max value, then I got the js error.Seems like some edge cases forget to check in the library.

How to change the second slider max limit to first slider value.

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