getStarted.mdx

sidebar_position	title
0	Getting started

import CodeBlock from "@theme/CodeBlock"; import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import { SliderXClassic, SliderXSelector } from "@iradics/react-sliderx"; import { useState } from "react"; import "./getStarted.css";

export const browsers = () => { return (

Compatible with all the popular recent browsers

<h4 style={{ paddingTop: "1em" }}>Confirmed compatible:

• Chrome
• Edge - From Version 79 - using Chromium
• Firefox - From version 103
• Safari - From macOS version 13.1
• Firefox - Android
• Opera / Opera mini - Android

<h4 style={{ paddingTop: "1em" }}>Not compatible:

• Internet Explorer

); };

export const devices = () => { return (

{

As it uses the native HTML slider, compatibility is ensured across touchscreen devices

}

); };

export const typeScript = () => { return

Written in TypeScript

; };

export const getSelection = (index) => { switch (index) { case 0: return browsers(); break; case 1: return devices(); case 2: return typeScript(); } };

export const SliderXSelectorGetStarted = () => { const [hintIndex, setHintIndex] = useState(0); const hints = ["test", "2", "3"]; return (

<div style={{ width: "75%", margin: "auto" }}> <SliderXSelector className={"gettingStartedSlider"} optionCount={3} defaultOptionIndex={0} colors={["#e1392c", "#a4c639", "#3178c6"]} onChange={(i) => { setHintIndex(i); }} labels={[ "Browser compatibility", "Device Compatibility", "TypeScript", ]} >

<div style={{ height: "100%", paddingTop: "2em", paddingbottom: "2em" }}> {getSelection(hintIndex)} ); };

---

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";