SliderXClassic

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

Note that in this example, TypeScript implementation needs additional elements.

JavaScript
TypeScript
CSS

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>
  );
};

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

export const SliderXClassicExample = () => {
  const [color, setcolor] = useState<Color>("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,${parseInt(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.

Props​

Props