rc-slider vs react-slider vs react-range vs react-compound-slider vs react-input-range vs react-range-slider-input
React スライダーライブラリ
パッケージを検索...
rc-sliderreact-sliderreact-rangereact-compound-sliderreact-input-rangereact-range-slider-input類似パッケージ:
React スライダーライブラリ

React スライダーライブラリは、ユーザーインターフェースにおいてスライダーコンポーネントを簡単に実装するためのパッケージです。これらのライブラリは、数値の範囲を選択したり、スライダーを通じてデータを入力するための直感的な方法を提供します。各ライブラリは異なる機能やデザイン原則を持ち、特定のユースケースに応じた選択が可能です。

npmのダウンロードトレンド
3 年
GitHub Starsランキング
統計詳細
パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
rc-slider3,032,2123,085173 kB2793ヶ月前MIT
react-slider303,161911269 kB402年前MIT
react-range220,34887974.3 kB201年前MIT
react-compound-slider116,705621401 kB244年前MIT
react-input-range65,030715-1308年前MIT
react-range-slider-input36,1535846.7 kB41ヶ月前MIT
機能比較: rc-slider vs react-slider vs react-range vs react-compound-slider vs react-input-range vs react-range-slider-input

カスタマイズ性

  • rc-slider:

    rc-sliderは、CSSを使用してスタイルを簡単にカスタマイズできるため、デザイン要件に応じた柔軟な調整が可能です。

  • react-slider:

    react-sliderは、シンプルで直感的なスタイルを持ち、カスタマイズも容易です。

  • react-range:

    react-rangeは、軽量な設計で、基本的なスタイルのカスタマイズが可能です。

  • react-compound-slider:

    react-compound-sliderは、複数のスライダーを組み合わせて使用することができ、各スライダーのスタイルを個別にカスタマイズできます。

  • react-input-range:

    react-input-rangeは、シンプルなスタイルを持ちながらも、必要に応じてカスタマイズが可能です。

  • react-range-slider-input:

    react-range-slider-inputは、スライダーと入力フィールドの組み合わせに特化しており、スタイルのカスタマイズが容易です。

パフォーマンス

  • rc-slider:

    rc-sliderは、パフォーマンスを重視した設計で、複雑なスライダーでもスムーズな操作が可能です。

  • react-slider:

    react-sliderは、シンプルな設計により、スムーズな操作を提供します。

  • react-range:

    react-rangeは、軽量な設計で、パフォーマンスを最優先に考えています。

  • react-compound-slider:

    react-compound-sliderは、複数のスライダーを同時に使用する場合でも高いパフォーマンスを維持します。

  • react-input-range:

    react-input-rangeは、シンプルな構造により、高速なレンダリングが可能です。

  • react-range-slider-input:

    react-range-slider-inputは、スライダーと入力フィールドの組み合わせでもパフォーマンスを損なうことなく動作します。

ユーザーインターフェース

  • rc-slider:

    rc-sliderは、直感的なユーザーインターフェースを提供し、ユーザーが簡単に操作できるように設計されています。

  • react-slider:

    react-sliderは、シンプルで直感的なユーザーインターフェースを提供します。

  • react-range:

    react-rangeは、シンプルなデザインで、ユーザーが簡単に操作できるように設計されています。

  • react-compound-slider:

    react-compound-sliderは、複雑なスライダー構成でも、ユーザーが理解しやすいインターフェースを提供します。

  • react-input-range:

    react-input-rangeは、シンプルで使いやすいインターフェースを持ち、ユーザーが直感的に操作できます。

  • react-range-slider-input:

    react-range-slider-inputは、スライダーと入力フィールドを組み合わせたインターフェースを提供し、ユーザーが数値を直接入力できます。

学習曲線

  • rc-slider:

    rc-sliderは、基本的な使い方が簡単で、すぐに学ぶことができます。

  • react-slider:

    react-sliderは、シンプルな設計により、学習が容易です。

  • react-range:

    react-rangeは、基本的な機能に特化しており、学習曲線は非常に緩やかです。

  • react-compound-slider:

    react-compound-sliderは、複雑な構成が可能ですが、学習曲線はやや急です。

  • react-input-range:

    react-input-rangeは、シンプルなAPIを持ち、初心者でも簡単に学ぶことができます。

  • react-range-slider-input:

    react-range-slider-inputは、スライダーと入力フィールドの組み合わせにより、学習曲線はやや急ですが、直感的です。

拡張性

  • rc-slider:

    rc-sliderは、カスタムコンポーネントを作成するための柔軟性があり、拡張性が高いです。

  • react-slider:

    react-sliderは、シンプルな設計により、基本的な拡張が可能です。

  • react-range:

    react-rangeは、軽量でシンプルな設計のため、拡張性はあまりありませんが、基本的な機能を提供します。

  • react-compound-slider:

    react-compound-sliderは、複数のスライダーを組み合わせることで、複雑な機能を実装できます。

  • react-input-range:

    react-input-rangeは、基本的な機能に特化しているため、拡張性は限られていますが、必要に応じてカスタマイズ可能です。

  • react-range-slider-input:

    react-range-slider-inputは、スライダーと入力フィールドの組み合わせにより、拡張性があります。

選び方: rc-slider vs react-slider vs react-range vs react-compound-slider vs react-input-range vs react-range-slider-input
  • rc-slider:

    rc-sliderは、カスタマイズ性が高く、複数のスライダーを同時に使用する必要がある場合に適しています。スタイルのカスタマイズが容易で、さまざまなデザイン要件に対応できます。

  • react-slider:

    react-sliderは、シンプルで使いやすいスライダーを提供し、基本的なスライダー機能を必要とする場合に適しています。特に、スタイルのカスタマイズが容易です。

  • react-range:

    react-rangeは、軽量でシンプルなスライダーを必要とする場合に最適です。パフォーマンスを重視した設計で、基本的な機能を提供します。

  • react-compound-slider:

    react-compound-sliderは、複雑なスライダー構成が必要な場合に最適です。複数のスライダーを組み合わせて使用することができ、柔軟な構成が可能です。

  • react-input-range:

    react-input-rangeは、シンプルで直感的なインターフェースを提供し、基本的なスライダー機能を必要とする場合に適しています。特に、数値の範囲を選択するだけのシンプルな要件に向いています。

  • react-range-slider-input:

    react-range-slider-inputは、スライダーと入力フィールドを組み合わせたコンポーネントを必要とする場合に適しています。ユーザーが数値を直接入力できる機能を提供します。

rc-sliderと類似したnpmパッケージ

rc-sliderは、Reactアプリケーション用のスライダーコンポーネントライブラリです。このライブラリは、シンプルでカスタマイズ可能なスライダーを提供し、ユーザーが値を選択するための直感的なインターフェースを実現します。rc-sliderは、単一のスライダーや範囲スライダーをサポートしており、さまざまなプロパティを使用してスタイルや動作を調整できます。しかし、rc-sliderの他にも、Reactエコシステムにはいくつかの代替ライブラリがあります。以下にいくつかの選択肢を紹介します。

  • react-input-sliderは、シンプルで使いやすいスライダーコンポーネントを提供します。react-input-sliderは、スライダーと入力フィールドを組み合わせて、ユーザーが数値を簡単に調整できるように設計されています。このライブラリは、直感的なインターフェースを持ち、スライダーの値を直接入力することも可能です。スライダーのスタイルや動作をカスタマイズできるため、さまざまなプロジェクトに適しています。

  • react-sliderは、React用の軽量なスライダーコンポーネントです。このライブラリは、シンプルで柔軟なAPIを提供し、スライダーのカスタマイズが容易です。react-sliderは、シングルスライダーや範囲スライダーの両方をサポートしており、さまざまなユースケースに対応できます。特に、軽量でパフォーマンスに優れたスライダーを求めている場合に適しています。

これらのライブラリの比較については、以下のリンクをご覧ください：rc-slider vs react-input-slider vs react-sliderの比較。

react-sliderと類似したnpmパッケージ

react-sliderは、Reactアプリケーション向けのスライダーコンポーネントを提供するライブラリです。このライブラリは、ユーザーが値を選択するための直感的なインターフェースを提供し、カスタマイズ可能なデザインと機能を備えています。react-sliderは、シンプルで使いやすいスライダーを必要とするプロジェクトに最適ですが、他にもいくつかの代替ライブラリがあります。

  • rc-sliderは、React向けの高機能なスライダーコンポーネントです。このライブラリは、スライダーの範囲、ステップ、ツールチップなど、さまざまなオプションを提供し、複雑なスライダーのニーズに対応します。rc-sliderは、より高度なカスタマイズや機能を必要とする場合に適しており、特に複数のスライダーを同時に使用する場合に便利です。
  • react-input-sliderは、スライダーと入力フィールドを組み合わせたシンプルなコンポーネントです。このライブラリは、ユーザーがスライダーを使って値を選択するだけでなく、直接数値を入力することもできるため、使い勝手が向上します。react-input-sliderは、シンプルで直感的なインターフェースを提供し、特に数値入力が必要な場合に便利です。

これらのライブラリの比較については、こちらをご覧ください: Comparing rc-slider vs react-input-slider vs react-slider。

react-rangeと類似したnpmパッケージ

react-rangeは、Reactアプリケーション用のスライダーコンポーネントライブラリです。このライブラリは、シンプルで柔軟なAPIを提供し、範囲選択や値の調整を容易にします。react-rangeは、カスタマイズ可能で、アクセシビリティにも配慮されているため、さまざまなプロジェクトで利用されています。しかし、同様の機能を持つ他のライブラリも存在します。以下にいくつかの代替ライブラリを紹介します。

  • rc-sliderは、React用のスライダーコンポーネントで、シンプルで使いやすいAPIを提供します。rc-sliderは、単一スライダーや範囲スライダーをサポートし、カスタマイズ可能なスタイルやイベントハンドリングを提供します。多くのプロジェクトで広く使用されており、特にシンプルなスライダーを必要とする場合に適しています。
  • react-compound-sliderは、複雑なスライダーコンポーネントを構築するための柔軟なライブラリです。複数のスライダーやカスタムロジックを組み合わせて、独自のスライダーを作成できます。react-compound-sliderは、特に複雑なユーザーインターフェースを必要とする場合に役立ちます。
  • react-input-rangeは、シンプルで使いやすい範囲スライダーを提供するライブラリです。基本的な機能を持ち、迅速に導入できるため、簡単な範囲選択が必要な場合に適しています。カスタマイズも可能ですが、機能は比較的シンプルです。
  • react-range-slider-inputは、スライダーと入力フィールドを組み合わせたコンポーネントです。ユーザーが数値を直接入力できるため、精密な値の設定が可能です。このライブラリは、スライダーと入力の両方の機能を必要とする場合に便利です。
  • react-sliderは、シンプルでカスタマイズ可能なスライダーコンポーネントを提供します。直感的なAPIを持ち、さまざまなスタイルや機能を持つスライダーを簡単に作成できます。特に軽量でシンプルなスライダーを求める場合に適しています。

これらのライブラリの比較については、こちらをご覧ください: Comparing rc-slider vs react-compound-slider vs react-input-range vs react-range vs react-range-slider-input vs react-slider.

react-compound-sliderと類似したnpmパッケージ

react-compound-sliderは、Reactアプリケーション向けの強力で柔軟なスライダーコンポーネントライブラリです。このライブラリは、複数のスライダーを組み合わせて、カスタマイズ可能なスライダーを作成することを可能にします。ユーザーインターフェースにおけるスライダーの実装を簡素化し、直感的な操作を提供します。react-compound-sliderは、特に複雑なスライダーのニーズに対応するために設計されていますが、他にも多くの代替ライブラリがあります。以下はそのいくつかです。

  • rc-sliderは、React向けのシンプルでカスタマイズ可能なスライダーコンポーネントです。基本的なスライダー機能を提供し、スライダーのスタイルや動作を簡単にカスタマイズできます。rc-sliderは、シンプルなスライダーが必要な場合に適しており、すぐに使える機能を提供します。
  • react-input-sliderは、スライダーと入力フィールドを組み合わせたコンポーネントです。このライブラリは、スライダーを使って値を調整しながら、同時に数値を直接入力することができるため、ユーザーにとって便利です。直感的なインターフェースを提供し、スライダーの操作をより柔軟にします。
  • react-rangeは、範囲スライダーを作成するためのReactコンポーネントです。このライブラリは、シンプルで使いやすいAPIを提供し、複数のスライダーを持つ範囲選択を簡単に実装できます。特に、範囲選択が必要な場合に役立ちます。
  • react-sliderは、Reactアプリケーション向けのシンプルでカスタマイズ可能なスライダーコンポーネントです。このライブラリは、スライダーのスタイルや動作を簡単にカスタマイズできるため、さまざまなユースケースに対応できます。

これらのライブラリの比較については、こちらをご覧ください: Comparing rc-slider vs react-compound-slider vs react-input-slider vs react-range vs react-slider。

react-input-rangeと類似したnpmパッケージ

react-input-rangeは、Reactアプリケーション向けのスライダーコンポーネントライブラリです。このライブラリは、ユーザーが数値範囲を直感的に選択できるようにするためのシンプルでカスタマイズ可能なスライダーを提供します。react-input-rangeは、特に数値入力が必要なフォームやインターフェースで便利です。しかし、他にも同様の機能を持つライブラリがいくつか存在します。以下にいくつかの代替ライブラリを紹介します。

  • rc-sliderは、Reactアプリケーション向けの高機能なスライダーコンポーネントです。rc-sliderは、シングルスライダーとダブルスライダーの両方をサポートしており、カスタマイズ性が高く、さまざまなスタイルや機能を簡単に追加できます。特に、複雑なスライダーのニーズがある場合に適しています。
  • react-compound-sliderは、複数のスライダーを組み合わせて使用できる柔軟なスライダーライブラリです。このライブラリは、スライダーの状態を管理するための強力なAPIを提供し、カスタムスライダーの実装を容易にします。特に、複数のスライダーを同時に操作する必要がある場合に便利です。
  • react-input-sliderは、シンプルで使いやすいスライダーコンポーネントを提供するライブラリです。react-input-sliderは、数値範囲の選択を直感的に行えるように設計されており、軽量でパフォーマンスにも優れています。シンプルなスライダーが必要な場合に最適です。
  • react-rangeは、カスタマイズ可能なスライダーコンポーネントを提供するライブラリで、シングルおよびダブルスライダーをサポートしています。react-rangeは、アクセシビリティを重視して設計されており、さまざまなスタイルや機能を追加することができます。特に、アクセシビリティが重要なプロジェクトに適しています。
  • react-sliderは、シンプルで直感的なスライダーコンポーネントを提供するライブラリです。このライブラリは、軽量で使いやすく、カスタマイズが容易なため、さまざまなプロジェクトに適しています。

これらのライブラリの比較については、こちらをご覧ください: rc-slider vs react-compound-slider vs react-input-range vs react-input-slider vs react-range vs react-sliderの比較。

react-range-slider-inputと類似したnpmパッケージ

react-range-slider-inputは、Reactアプリケーション向けのスライダーコンポーネントを提供するライブラリです。このライブラリは、ユーザーが範囲を選択するための直感的で使いやすいインターフェースを提供し、カスタマイズ可能なスタイルや機能を備えています。react-range-slider-inputは、シンプルで効果的な範囲スライダーを実装するための優れた選択肢ですが、他にもいくつかの代替ライブラリがあります。以下にいくつかの代替案を紹介します。

  • rc-sliderは、React用のスライダーコンポーネントで、シンプルでありながら強力な機能を提供します。rc-sliderは、シングルスライダーやダブルスライダー、範囲スライダーなど、さまざまなスライダーのスタイルをサポートしており、カスタマイズも容易です。特に、複雑なスライダーの要件を持つアプリケーションに適しています。
  • react-compound-sliderは、複数のスライダーを組み合わせて複雑なインターフェースを構築するためのライブラリです。これは、スライダーの構成要素を自由に組み合わせることができ、ユーザーが直感的に範囲を選択できるように設計されています。特に、カスタムスライダーを作成したい場合に便利です。
  • react-input-rangeは、シンプルな範囲スライダーを提供するライブラリで、ユーザーが数値の範囲を選択するのに役立ちます。react-input-rangeは、シンプルなAPIとカスタマイズ可能なスタイルを持ち、迅速に導入できるため、小規模なプロジェクトに適しています。
  • react-rangeは、シンプルで使いやすいスライダーコンポーネントを提供し、ユーザーが範囲を選択するための直感的なインターフェースを持っています。react-rangeは、カスタマイズ可能で、さまざまなデザイン要件に対応できる柔軟性があります。
  • react-sliderは、シンプルで軽量なスライダーコンポーネントを提供します。使いやすさとカスタマイズ性を重視しており、基本的なスライダーの要件を満たすのに適しています。

これらのライブラリの比較については、以下のリンクを参照してください: Comparing rc-slider vs react-compound-slider vs react-input-range vs react-range vs react-range-slider-input vs react-slider.

rc-slider のREADME

rc-slider

Slider UI component for React

NPM version npm download build status Codecov bundle size dumi

Install

rc-slider

Example

npm start and then go to http://localhost:8000

Online examples: https://slider.react-component.now.sh/

Usage

Slider

import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';

export default () => (
  <>
    <Slider />
  </>
);

Range

Please refer to #825 for information regarding usage of Range. An example:

import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

export default () => (
  <>
    <Slider range />
  </>
);

Compatibility

IE / Edge
IE / Edge		Firefox
Firefox		Chrome
Chrome		Safari
Safari		Electron
Electron
IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versions

API

createSliderWithTooltip(Slider | Range) => React.Component

An extension to make Slider or Range support Tooltip on handle.

const Slider = require('rc-slider');
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

Online demo

After Range or Slider was wrapped by createSliderWithTooltip, it will have the following props:

NameTypeDefaultDescription
tipFormatter(value: number): React.ReactNodevalue => valueA function to format tooltip's overlay
tipPropsObject{
placement: 'top',
prefixCls: 'rc-slider-tooltip',
overlay: tipFormatter(value)
}		A function to format tooltip's overlay

Common API

The following APIs are shared by Slider and Range.

NameTypeDefaultDescription
classNamestring''Additional CSS class for the root DOM node
minnumber0The minimum value of the slider
maxnumber100The maximum value of the slider
idstring''Unique identifier for the component, used for accessibility
marks{number: ReactNode} or{number: { style, label }}{}Marks on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.
stepnumber or null1Value to be added or subtracted on each step the slider makes. Must be greater than zero, and max - min should be evenly divisible by the step value.
When marks is not an empty object, step can be set to null, to make marks as steps.
verticalbooleanfalseIf vertical is true, the slider will be vertical.
handle(props) => React.ReactNodeA handle generator which could be used to customized handle.
includedbooleantrueIf the value is true, it means a continuous value interval, otherwise, it is a independent value.
reversebooleanfalseIf the value is true, it means the component is rendered reverse.
disabledbooleanfalseIf true, handles can't be moved.
keyboardbooleantrueSupport using keyboard to move handlers.
dotsbooleanfalseWhen the step value is greater than 1, you can set the dots to true if you want to render the slider with dots.
onBeforeChangeFunctionNOOPonBeforeChange will be triggered when ontouchstart or onmousedown is triggered.
onChangeFunctionNOOPonChange will be triggered while the value of Slider changing.
onChangeCompleteFunctionNOOPonChangeComplete will be triggered when ontouchend or onmouseup is triggered.
minimumTrackStyleObjectplease use trackStyle instead. (only used for slider, just for compatibility , will be deprecate at rc-slider@9.x )
maximumTrackStyleObjectplease use railStyle instead (only used for slider, just for compatibility , will be deprecate at rc-slider@9.x)
handleStyleArray[Object] | Object[{}]The style used for handle. (both for slider(Object) and range(Array of Object), the array will be used for multi handle following element order)
trackStyleArray[Object] | Object[{}]The style used for track. (both for slider(Object) and range(Array of Object), the array will be used for multi track following element order)
railStyleObject{}The style used for the track base color.
dotStyleObject | (dotValue) => Object{}The style used for the dots.
activeDotStyleObject | (dotValue) => Object{}The style used for the active dots.

Slider

NameTypeDefaultDescription
defaultValuenumber0Set initial value of slider.
valuenumber-Set current value of slider.
startPointnumberundefinedTrack starts from this value. If undefined, min is used.
tabIndexnumber0Set the tabIndex of the slider handle.
ariaLabelForHandlestring-Set the aria-label attribute on the slider handle.
ariaLabelledByForHandlestring-Set the aria-labelledby attribute on the slider handle.
ariaRequiredboolean-Set the aria-required attribute on the slider handle.
ariaValueTextFormatterForHandle(value) => string-A function to set the aria-valuetext attribute on the slider handle. It receives the current value of the slider and returns a formatted string describing the value. See WAI-ARIA Authoring Practices 1.1 for more information.

Range

NameTypeDefaultDescription
defaultValuenumber[][0, 0]Set initial positions of handles.
valuenumber[]Set current positions of handles.
tabIndexnumber[][0, 0]Set the tabIndex of each handle.
ariaLabelGroupForHandlesArray[string]-Set the aria-label attribute on each handle.
ariaLabelledByGroupForHandlesArray[string]-Set the aria-labelledby attribute on each handle.
ariaValueTextFormatterGroupForHandlesArray[(value) => string]-A function to set the aria-valuetext attribute on each handle. It receives the current value of the slider and returns a formatted string describing the value. See WAI-ARIA Authoring Practices 1.1 for more information.
countnumber1Determine how many ranges to render, and multiple handles will be rendered (number + 1).
allowCrossbooleantrueallowCross could be set as true to allow those handles to cross.
pushableboolean or numberfalsepushable could be set as true to allow pushing of surrounding handles when moving a handle. When set to a number, the number will be the minimum ensured distance between handles. Example:
draggableTrackbooleanfalseOpen the track drag. open after click on the track will be invalid.

SliderTooltip

The Tooltip Component that keep following with content.

Development

npm install
npm start

Test Case

npm run test

Coverage

npm run coverage

License

rc-slider is released under the MIT license.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.