Change calcite slider attributes at runtime without rebuilding

[GregoryBologna]

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