Change calcite slider attributes at runtime without rebuilding

GregoryBologna — Wed, 08 Jun 2022 19:22:49 GMT

Given this hydrated calcite slider, how can I change the attributes--and specifically, the ticks without rebuilding the slider from scratch? When I change its attributes, the ticks do not re-hydrate the control. Is there a method to refresh after its attributes are changed? (see code fragment below).

<calcite-slider id="pao-buffer-slider" label-handles label-ticks max="500" min-label="0" page-step="10" step="1" ticks="100" value="0" listener="true" min="0" calcite-hydrated=""> <div class="track"> <div class="track__range" style="left: 0%; right: 99%;"/> <div class="ticks"> <span class="tick tick--active" style="left: 0%;"> <span class="tick__label tick__label--min">0</span> </span> <span class="tick" style="left: 50%;"> <span class="tick__label">100</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label tick__label--max">200</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label">300</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label">400</span> </span> <span class="tick" style="left: 100%;"> <span class="tick__label">500</span> </span> </div> </div>

// code fragment to change slider units of measure let slider = document.getElementById('pao-buffer-slider'); if(slider) { // tried this...but ticks do not get re-hydrated let obj = new PaoSliderUnits(...SliderUnitsFeet); slider.labelHandles = obj.labelHandles; slider.labelTicks = obj.labelTicks; slider.max = obj.max; slider.minLabel = obj.minLabel; slider.pageStep = obj.pageStep; slider.step = obj.step; slider.ticks = obj.ticks; slider.value = obj.value; // and this...same results as above if (obj.labelHandles) slider.setAttribute('label-handles', ''); if (obj.labelTicks) slider.setAttribute('label-ticks', ''); slider.setAttribute('max', obj.max); slider.setAttribute('min-label', obj.minLabel); slider.setAttribute('page-step', obj.pageStep); slider.setAttribute('step', obj.step); slider.setAttribute('ticks', obj.ticks); slider.setAttribute('value', obj.value); } // various units of measure const SliderUnitsFeet = [true, true, '500', '0', '25', '0.5', '50', '0'] etc. SliderUnitsMeters, SliderUnitsKilometers, SliderUnitsMile class PaoSliderUnits { constructor(labelHandles, labelTicks, max, minLabel, pageStep, step, ticks, value) { this.labelHandles = labelHandles; this.labelTicks = labelTicks; this.max = max; this.minLabel = minLabel; this.pageStep = pageStep; this.step = step; this.ticks = ticks; this.value = value; } }

topic Change calcite slider attributes at runtime without rebuilding in ArcGIS JavaScript Maps SDK Questions

Change calcite slider attributes at runtime without rebuilding