1.0.1 • Published 3 years ago

react-better-slider v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

react-better-slider

A simple slider component which provides you better features like disabling input upto a value.

Installation

npm i react-better-slider
or
yarn add react-better-slider

Usage

import React from "react";
import BetterSlider from "react-better-slider";

const DemoApp: React.FC = () => {
  const [value, setValue] = useState(0);
  return (
    <Slider
      disabledPosition={24}
      value={value}
      onChange={(newResponse: number) => setValue(newResponse)}
    />
  );
};

export default DemoApp;

Props

NameTypeDefault
disabledBackground?string"#ddd"
disabledDirection?"ltr" | "rtl""ltr"
disabledFillStyles?React.CSSProperties
disabledPosition?number
fillBackground?string"#000"
fillStyles?React.CSSProperties
max?number
min?number
trackBackground?string
trackCursor?"auto" | "default" | "none" | "pointer""pointer"
trackHeight?string | number"4px"
trackStyles?React.CSSProperties
thumbBackground?string"#000"
thumbBorder?string | number
thumbBorderRadius?string | number"9999px"
thumbHeight?string | number"16px"
thumbStyles?React.CSSProperties
thumbWidth?string | number"16px"
valuenumber
onChangefunction(newValue: number)=>void