title: Ion RangeSlider not reloading correctly in Angular 9 project
body: <p>I am trying to integrate <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" rel="nofollow noreferrer">Ion.RangeSlider</a> into an Angular 9 project to select a range of dates. I'm having an issue where the slider works when it initially loads on a page; however it doesn't load right when I navigate back to the same page.</p>
  <p><em><strong>(Edited to add routes)</strong></em>
  For example, here is a view when I load a page in my project (<code>/#/category?id=13&amp;data_list_id=15</code>), and the slider is loading as expected:
  <a href="https://i.stack.imgur.com/whsLt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/whsLt.png" alt="Screenshot of slider working on a page" /></a>
  The next tab over navigates to (<code>/#/category?id=13&amp;data_list_id=16</code>) also generates the slider as expected:
  <a href="https://i.stack.imgur.com/pb6lL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pb6lL.png" alt="Screenshot of slider working on another page" /></a>
  Returning to the initial summary view (<code>/#/category?id=13&amp;data_list_id=15</code>) results in the slider appearing as an input box and not working properly.
  <a href="https://i.stack.imgur.com/hKrmd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hKrmd.png" alt="Screenshot of slider failing to load properly when navigating back to initial page" /></a></p>
  <p>Below are sections of code from my component that I think are the relevant parts to generating the slider.</p>
  <p><em><strong>date-slider.component.html</strong></em></p>
  <pre><code>&lt;label [for]=&quot;'dateFrom'&quot; class=&quot;visuallyhidden&quot;&gt;Date From:&lt;/label&gt;
  &lt;input type=&quot;text&quot; [name]=&quot;'dateFrom'&quot; [id]=&quot;'dateFrom'&quot; [value]=&quot;sliderDates[start]&quot; class=&quot;date-input js-from&quot; /&gt;
  &lt;div class=&quot;slider-container&quot;&gt;
      &lt;input class=&quot;sliders&quot; type=&quot;text&quot; [id]=&quot;'slider'&quot; value=&quot;&quot; aria-label=&quot;date-range-slider&quot; /&gt;
  &lt;/div&gt;
  &lt;label [for]=&quot;'dateTo'&quot; class=&quot;visuallyhidden&quot;&gt;Date To:&lt;/label&gt;
  &lt;input type=&quot;text&quot; [name]=&quot;'dateTo'&quot; [id]=&quot;'dateTo'&quot; [value]=&quot;sliderDates[end]&quot; class=&quot;date-input js-to&quot; /&gt;
  </code></pre>
  <p><em><strong>date-slider.component.ts</strong></em></p>
  <pre><code>  ngOnInit() {
      if (this.dates &amp;&amp; this.dates.length) {
        const defaultRanges = this.findDefaultRange(this.dates, this.freq, this.defaultRange, this.dateFrom, this.dateTo);
        // Start and end used for 'from' and 'to' inputs in slider
        // If start/end exist in values array, position handles at start/end; otherwise, use default range
        this.start = defaultRanges.start;
        this.end = defaultRanges.end;
        this.sliderDates = defaultRanges.sliderDates; // Array of dates for the slider i.e. ['2000', '2001', '2002', '2003', '2004', '2005']
      }
    }
  
    ngAfterViewInit() {
      const $fromInput = $(`#dateFrom`);
      const $toInput = $(`#dateTo`);
      const $range = $(`#slider`).data('ionRangeSlider');
      this.initRangeSlider(this.sliderDates, this.start, this.end, this.freq);
      // Set change functions for 'from' and 'to' date inputs
      this.setInputChangeFunction($fromInput, this.sliderDates, $range, 'from', this.portalSettings, this.freq);
      this.setInputChangeFunction($toInput, this.sliderDates, $range, 'to', this.portalSettings, this.freq);
      this.updateChartsAndTables($fromInput.prop('value'), $toInput.prop('value'), this.freq)
      this.cd.detectChanges(); // cd refers to ChangeDetectorRef
    }
  
    initRangeSlider(sliderDates: Array&lt;any&gt;, start: number, end: number, freq: string) {
      const updateChartsAndTables = (from, to, freq) =&gt; this.updateChartsAndTables(from, to, freq);
      const $fromInput = $(`#dateFrom`);
      const $toInput = $(`#dateTo`);
      $(`#slider`).ionRangeSlider({
        min: 0,
        from: start,
        to: end,
        values: sliderDates,
        prettify_enabled: false,
        hide_min_max: true,
        hide_from_to: true,
        keyboard: true,
        keyboard_step: 1,
        skin: 'round',
        type: 'double',
        onChange: function (data) {
          $fromInput.prop('value', data.from_value);
          $toInput.prop('value', data.to_value);
        },
        onFinish: function (data) {
          updateChartsAndTables(data.from_value, data.to_value, freq);
        }
      });
    }
  </code></pre>
  <p>I have tried using the <a href="https://github.com/PhilippStein/ng2-ion-range-slider#readme" rel="nofollow noreferrer">ng2-ion-range-slider</a> wrapper, but I end up with the following error when I load it into my module:</p>
  <blockquote>
  <p>This likely means that the library (ng2-ion-range-slider) which declares IonRangeSliderModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.</p>
  </blockquote>
  <p>(Weirdly the slider works fine on an existing project that is basically the same application. The existing application was developed back when Angular was at version 2. It became a multiple app project where all the components, services, and individual app modules were all in the same <code>src</code> folder. But now that Angular-cli supports generating multiple apps in the same project, I'm trying to split things up and keep reusable/common components in their own custom library.)</p>