input-slider

Example

<cr-component id="component" name="input-slider" loading></cr-component>
<script>
  const sliderSteps = [
    { text: "Menos de 3", value: 1 },
    { text: "Entre 3 y 6", value: 2 },
    { text: "Entre 6 y 10", value: 3 },
    { text: "Más de 10", value: 4 },
  ];
  const slider = document.querySelector("#component");
  slider.init({
    steps: sliderSteps,
    selectedValue: 2,
  });
  slider.onCreated(
    slider.addEventListener("change", (event) => {
      console.log("Slider value changed to ", event.detail);
    })
  );
</script>

Schema

{}

Complete Schema

{}

CSS Variables

--color-text: var(--color-grey-4);
--color-text-selected: var(--color-primary);
--color-line: var(--color-grey-2);
--color-line-selected: var(--color-primary);
--color-dot: var(--color-grey-4);
--color-dot-selected: var(--color-primary);
--color-line-hover: var(--color-grey-3);

Locales

{}