Sliders

The range slider component allows the user to select a value or range.

Single slider

Increase by ten 10 100 
<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>

Description

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.

Props

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

Events

Name Description
change This event is fired every time the input changes, it emits a value

Multiple range slider

Age 18 68 
<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>

Multiple range slider with a dynamic labels and an array of values

Income $0 $150K+ 
<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>

Multiple range slider with a dynamic labels and dynamic values

Age 18 68 
<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>

Description

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.

Props

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

Events

Name Description
change This event is fired every time an input changes, it emits an object of the lower and upper value