<tk-label>Increase by ten
  <tk-single-slider
    class="mt-3x"
    min="10"
    max="100"
    step="10">
    <span class="t-normal" slot="slider-min">10</span>
    <span class="t-normal" slot="slider-max">100</span>
  </tk-single-slider>
</tk-label>

<tk-label>Age
  <tk-range-slider
    class="mt-3x"
    step="5"
    min="18"
    max="68">
    <span class="t-normal" slot="slider-min">18</span>
    <span class="t-normal" slot="slider-max">68</span>
  </tk-range-slider>
</tk-label>

<tk-label>Income
  <tk-range-slider
    class="mt-3x"
    step="1"
    min="0"
    max="7"
    list='defaultList'
    id="slider">
    <span class="t-normal" slot="slider-min">$0</span>
    <span class="t-normal" slot="slider-max">$150K+</span>
  </tk-range-slider>
</tk-label>

<script>
  const component = document.getElementsByTagName('tk-range-slider')[1];
  const defaultList = ['$0','$20K','$40K', '$60K','$80K','$100K', '$125K','$150K+'];
  component.list = defaultList;
  const slider = document.getElementById('slider');
  const sliderMin = document.querySelectorAll('span[slot="slider-min"]');
  const sliderMax = document.querySelectorAll('span[slot="slider-max"]');
  slider.addEventListener('change', (e) => changeSliderValue(e));
  const changeSliderValue = (element) => {
    sliderMin[2].innerText = defaultList[event.detail.lower];
    sliderMax[2].innerText = defaultList[event.detail.upper];
  };
</script>

<tk-label>Age
  <tk-range-slider
    class="mt-3x"
    step="5"
    id="slider2"
    min="18"
    max="68">
    <span class="t-normal" slot="slider-min">18</span>
    <span class="t-normal" slot="slider-max">68</span>
  </tk-range-slider>
</tk-label>
<script>
  const slider2 = document.getElementById('slider2');
  const sliderMin2 = document.querySelectorAll('span[slot="slider-min"]');
  const sliderMax2 = document.querySelectorAll('span[slot="slider-max"]');
  slider2.addEventListener('change', (e) => changeSliderValue2(e));
  const changeSliderValue2 = (element) => {
    sliderMin2[3].innerText = event.detail.lower;
    sliderMax2[3].innerText = event.detail.upper;
  };
</script>