Slider

"use client";

import React, {useState} from "react";
import {Slider} from "@brynlabs/fusion-ui";

export const SliderExample = () => {
  const [value, setValue] = useState(100);
  return (
    <Slider
      label={"Budget"}
      min={50}
      max={200}
      formatLabel={value => `${value} €`}
      value={value}
      onChange={setValue}
    />
  );
};

"use client";

import React, {useState} from "react";
import {Slider} from "@brynlabs/fusion-ui";

export const SliderTicksExample = () => {
  const [value, setValue] = useState(100);
  return (
    <Slider
      label={"Budget"}
      hint={"Helper Text"}
      required={true}
      min={50}
      max={200}
      formatLabel={value => `${value} €`}
      showTicks={true}
      value={value}
      onChange={setValue}
    />
  );
};

"use client";

import React, {useState} from "react";
import {Slider} from "@brynlabs/fusion-ui";

// Maps every star rating to the number of reviews with that rating.
const ratingDistribution = {1: 12, 2: 8, 3: 25,4: 61, 5: 44};

export const SliderRatingExample = () => {
  const [value, setValue] = useState<[number, number]>([3, 5]);
  return (
    <Slider
      label={"Rating"}
      hint={"Every bar is centered on its rating, the first and last bar are half as wide."}
      min={1}
      max={5}
      formatLabel={value => `${value} ★`}
      showTicks={true}
      histogram={ratingDistribution}
      value={value}
      onChange={setValue}
    />
  );
};

"use client";

import React, {useState} from "react";
import {Slider} from "@brynlabs/fusion-ui";

// Maps prices to the number of products with that price.
const priceDistribution = {
  50: 12,
  60: 25,
  70: 38,
  80: 45,
  90: 52,
  100: 48,
  110: 40,
  120: 33,
  130: 27,
  140: 22,
  150: 30,
  160: 41,
  170: 36,
  180: 24,
  190: 15,
  200: 8,
};

export const SliderRangeExample = () => {
  const [value, setValue] = useState<[number, number]>([100, 140]);
  return (
    <Slider
      label={"Price range"}
      hint={"Helper Text"}
      min={50}
      max={200}
      step={10}
      formatLabel={value => `${value} €`}
      showTicks={true}
      histogram={priceDistribution}
      value={value}
      onChange={setValue}
    />
  );
};