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.
Property | Required? | Default | Description |
---|---|---|---|
max |
yes | value |
Sets the max value |
min |
yes | value |
Sets the min value |
step |
yes | value |
Sets the step or how the slider should increment |
value |
yes | value |
Sets the value of the input |
Name | Description |
---|---|
change |
This event is fired every time the input changes, it emits a value |
<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.
Property | Required? | Default | Description |
---|---|---|---|
list |
no | Sets an array of values | |
max |
yes | value |
Sets the max value |
min |
yes | value |
Sets the min value |
step |
yes | value |
Sets the step or how the slider should increment |
lowerValue |
yes | value |
Sets the value of the left input |
upperValue |
yes | value |
Sets the value of the right input |
Name | Description |
---|---|
change |
This event is fired every time an input changes, it emits an object of the lower and upper value |