For full documentation, compatibility and examples visit sliderx.iradics.net

Getting started

Add SliderX your project:

npm install @iradics/react-sliderx

npm yarn add @iradics/react-sliderx

Import SliderX component(s) into your project:

import { SliderXClassic, SliderXSelector } from "@iradics/react-sliderx";

SliderXSelector

A slider component with predefined positions to select from multiple options

<SliderXSelector
  optionCount={5}
  colors={["#3cc9a3", "#2f8eb8", "#6617a3", "#dea002", "#e00000"]}
  className={"sliderXSelectorExample"}
  labels={["option 1", "option 2", "option 3", "option 4", "option 5"]}
  animationTime={100}
  defaultOptionIndex={2}
></SliderXSelector>

Props

| Name | Type | Optional | Default | Description | | ---------------------: | :--------------------------------------: | :------: | ------- | ---------------------------------------------------------------------------------------------------- | | className | string | true | | Additional classname to add to the component | | onChange | function | true | | Returns the index of the selected option | | colors | array | true | | Array of RGB,RGBA or HEX colors | | optionCount | number | false | | Number of options | | defaultOptionIndex | number | true | 0 | Initially selected option. Invalid index is defaulted to the min or max index | | labels | array | true | | Array of strings for labels. Pass "" for empty label. \n works for linebreaks | | id | string | true | | Custom ID for the direct slider (<input>) element which overwrites the default generated random ID | | options | EnumSliderXOptions | true | | Slider behavior options. Use EnumSliderXOptions | | index | number | true | | Allows to externally control the selection. Invalid indexes are defaulted to min or max index. | | animationTime | number | true | 0 | Time of full animation for selection change in microseconds. Use 0 for instant change. |

SliderXClassic

Classic slider component with full range, implementing all the available easy styling possibilities.

export const SliderXClassicExample = () => {
  const [color, setcolor] = useState("rgba(102,23,163,1)");
  return (
    <div style={{ width: "75%", margin: "auto" }}>
      <SliderXClassic
        defaultValue={100}
        min={0}
        max={100}
        colors={[color]}
        className={"sliderXClassicExample"}
        onChange={(e) => {
          setcolor(`rgba(102,23,163,${e.target.value / 100})`);
        }}
      ></SliderXClassic>
    </div>
  );
};

.sliderXClassicExample {
  --sliderX-thumb-width: 1.5em;
  --sliderX-thumb-height: 3em;
  --sliderX-track-height: 2em;
  --sliderX-track-border-radius: 0.3em;
  --sliderX-thumb-border: 5px outset var(--sliderX-var-dynamic-color);
  --sliderX-thumb-color: white;
  --sliderX-thumb-color: white;
  --sliderX-track-box-shadow: 0px 0px 30px var(--sliderX-var-dynamic-color);
  --sliderX-thumb-box-shadow: 0px 0px 30px var(--sliderX-var-dynamic-color);
}

Props

| Name | Type | Optional | Default | Description | | ---------------: | ------------------------------------ | -------- | ------- | ---------------------------------------------------------------------------------------------------- | | min | number | true | 0 | Minimum value | | max | number | true | 100 | Maximum value | | step | number | true | 1 | Specifies the number intervals | | className | string | true | | Additional classname to add to the component | | onChange | function | true | | Returns the HTMLinput change event | | colors | array | true | | Array of RGB,RGBA or HEX colors | | defaultValue | number | true | min | Sets the initial value of the slider | | id | string | true | | Custom ID for the direct slider (<input>) element which overwrites the default generated random ID | | options | EnumSliderXOptions | true | | Slider behavior options. Use EnumSliderXOptions | | value | number | true | | Controls the value of the slider externally. |

SliderX Options

You can pass additional options which change the behaviour of the SliderX component.

Use EnumSliderXOptions to access these options.

<SliderXSelector
  ...
  options={EnumSliderXOptions.DynamicColorSampleRight | EnumSliderXOptions.ClickableLabels}
  ...
></SliderXSelector>

| EnumSliderXOptions. | Selector | Classic | Description | | ---------------------------------------------------------: | :------: | :-----: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | DynamicColorSampleRight | x | x | In case of the thumb being exactly between two colors, sample the right side color of the thumb instead of the left side | | DisableCenteredOptions | x | | Disable the default centering of the options in SliderXSelector. This way the selectable options span from the very beginning of the slider to the very end | | ClickableLabels | x | | Makes click on the labels change the slider position |