Accessible UI Components Demo

Step 1: Add this script to your app:

            
<script 
  type="text/javascript" 
  src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components@latest/dist/simpleRange.min.js">
</script>
            
          

If you want to programatically reset ranges you can do that using the range-reset event

            
// If you provide a slider ID then it will reset ONLY that slider, else it will reset ALL sliders
const sliderId = null;
const event = new CustomEvent("range-reset", { detail: { sliderId: sliderId } });

document.dispatchEvent(event);
            
          

Basic usage:

            
<range-selector min-range="0" max-range="1000" />
            
          

If you want to programatically set the range you can do that using the range-set event

            
const event = new CustomEvent('range-set', {
  detail: { 
    sliderId: 'basicUsageRangeSelector', 
    minValue: 350, 
    maxValue: 700 
  }
});
      
document.dispatchEvent(event);
            
          

Using inputs-for-labels:

            
<range-selector min-range="99" max-range="300" inputs-for-labels />
            
          

Using an ID using id so that it will be emitted on the range-changed event and using min-label and max-label for accessibility. Also using number-of-legend-items-to-show to show 6 values below the slider and setting the slider color using slider-color.

            
<range-selector
  id="yearSelector"
  min-label="Minimum"
  max-label="Maximum"
  min-range="1000"
  max-range="2022"
  number-of-legend-items-to-show="6"
  slider-color="#6b5b95"
/>
            
          

Using circle-size to adjust the circle size to 30px (see the README for important caveats using this) and also using label-font-weight to adjust the font-weight of the labels, finally using label-font-size to adjust the font size. (Note: these do not adjust the legend font size or weights):

            
<range-selector 
    min-range="1989"
    max-range="2023"
    circle-size="30px"
    label-font-weight="inherit"
    label-font-size="24px"
/>
            
          

Using preset-min and preset-max to set the range sliders at a given position:

            
<range-selector 
  min-range="1980"
  max-range="2023" 
  preset-min="1989" 
  preset-max="1994" 
  number-of-legend-items-to-show="6" 
/>
            
          

Using label-before and label-after to set the ::before and ::after content of the labels:

            
<range-selector 
  min-range="100"
  max-range="1000"
  label-before="$"
  label-after="*"
  slider-color="darkgrey"
/>
            
          

You can adjust the number of legend items to show and you can also use the shorthand min & max instead of min-range and max-range.

            
<range-selector
  min-label="Minimum"
  max-label="Maximum"
  min="99"
  max="999"
  number-of-legend-items-to-show="4"
  hide-label
  slider-color="#92a8d1"
/>
            
          

Altering the border of the circles using circle-border and circle-focus-border:

            
<range-selector
  min-label="Minimum Range"
  max-label="Maximum Range"
  min-range="1"
  max-range="33"
  slider-color="purple"
  circle-border="3px solid tomato"
  circle-focus-border="3px solid green"
/>
            
          

Altering the colors of the slider, slider circle, and accessibility focus color using slider-color, circle-color, circle-border-color, and circle-focus-border-color. Any valid CSS color, hex, etc will work.

            
<range-selector
  min-label="Minimum Range"
  max-label="Maximum Range"
  min-range="5"
  max-range="555"
  inputs-for-labels
  slider-color="orange"
  circle-color="#f7cac9"
  circle-border-color="#083535"
  circle-focus-border-color="red"
/>
            
          

Using a custom range changed event name using event-name-to-emit-on-change so that your consumer of this component can listen for this specific event name when the user has adjusted the ranges.

            
<range-selector
  min-range="1092"
  max-range="2022"
  min-label="i18nMinLabel"
  max-label="i18nMaxLabel"
  id="yearRangeSelector"
  event-name-to-emit-on-change="my-custom-range-changed-event"
/>
            
          

Hiding the legend using hide-legend.

            
<range-selector
  min-label="i18nLabel"
  max-label="i18nLabel"
  min-range="5"
  max-range="500"
  number-of-legend-items-to-show="6"
  hide-legend
/>
            
          

Hiding the legend and the label using hide-legend and hide-label.

            
<range-selector
  min-label="i18nLabel"
  max-label="i18nLabel"
  min-range="123"
  max-range="987"
  number-of-legend-items-to-show="6"
  hide-legend
  hide-label
/>