The range slider component allows the user to select a value or range.
<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>A note about minimum, maxium and step values: In these examples, the difference between the max and min are divisable by the step. If it is not, the max handle/thumb will not fully start at the end of the track, so it is preferrable that they are to make the slider work properly.
<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>Dynamic minimum and maximum value: You have the ability to either add a static minimum or maximum value, no min or max or a dynamic min and max. In order to create a dynamic min and max, you’ll need to grab the change event emitter and apply them to the slider-min and slider-max slots.
A note about minimum, maxium and step values: In these examples, the difference between the max and min are divisable by the step. If it is not, the max handle/thumb will not fully start at the end of the track, so it is preferrable that they are to make the slider work properly.