Erstellen Sie einen wiederverwendbaren Bereichsregler in React

1. Verwenden Sie HTML <input>, um eine benutzerdefinierte RangeSlider-Reaktionskomponente zu erstellen
2. Verwenden Sie die multi-range-slider-react-Bibliothek, um einen Multi-Range-Slider in React zu erstellen

Dieser Artikel wird uns beibringen, den Bereichsschieberegler in React zu erstellen.

Es ist einfach, einen Bereichsschieberegler mit dem HTML-Tag <input> zu erstellen, aber wir werden lernen, den aktuellen Wert des Bereichsschiebereglers in React zu verwalten. Wir werden auch die Komponente RangeSlider wiederverwendbar machen, um sie in einer anderen Komponente wiederzuverwenden.

Verwenden Sie HTML <input>, um eine benutzerdefinierte RangeSlider-Reaktionskomponente zu erstellen

In diesem Beispiel haben wir zwei Dateien namens App.js und rangeSlider.js erstellt. In der Datei App.js haben wir die Komponente RangeSlider importiert und wiederverwendet, und wir verwalten den aktuellen Wert des Bereichsschiebereglers aus der übergeordneten Komponente App.

Außerdem haben wir die Requisiten innerhalb der RangeSlider-Komponente übergeben. Als Prop haben wir die Variable value übergeben, die wir von der Komponente RangeSlider bekommen.

Außerdem haben wir den Minimal- und Maximalwert des Bereichsschiebereglers in Form eines Objekts namens sliderProps übergeben.

handleValueChange() wird als Prop innerhalb der RangeSlider-Komponente übergeben und in der onChange-Variablen gespeichert.

<RangeSlider {...sliderProps} onChange={handleValueChange} value={inputValue} />

In der Datei rangeSlider.js zeigen wir den aktuellen Wert des Schiebereglers, den wir in den Requisiten der übergeordneten Komponente erhalten haben. Wir haben den HTML-Bereichsschieberegler mit dem <input>-Tag erstellt und den Wert der min- und max-Attribute mit den Werten eingerichtet, die wir im sliderProps-Objekt von der übergeordneten Komponente erhalten haben.

Immer wenn das onChange-Ereignis für die HTML-Eingabe ausgelöst wird, ruft es die in der onChange-Variable gespeicherte Funktion auf, die handleValueChange() ist.

<input {...props.sliderProps} type="range" value={props.value} onChange={props.onChange} />

Vor dem Ausführen des unten angegebenen Beispielcodes sollten Benutzer sicherstellen, dass der entsprechenden Datei Code hinzugefügt und der Dateiname korrekt angegeben wurde; Andernfalls kann es zu einem Importfehler kommen.

Beispielcode:

import { useState } from 'react';
// import reusable slider component
import RangeSlider from './rangeSlider'

function App() {
  // set slider props
  const [sliderProps, setSliderProps] = useState({
    min: 0,
    max: 250,
  });
  // set input value
  const [inputValue, setinputValue] = useState(0);

  //  handle the changes in the input value of the range slider
  const handleValueChange = e => {
    setinputValue(e.target.value);
  };


  return (
    //  reuse the range slider component
    // passed some values as props to use inside the RangeSlider component
     <RangeSlider
       {...sliderProps}
       onChange={handleValueChange}
       value={inputValue} />
  );
}

export default App;

function RangeSlider(props) {
  return (
    <div>
      <p>Reusable Slider Component In React</p>
      {/* showing the value of the range slider in the child component, which we are getting from the parent component in the form of props */}
      <h3>Slider Value: {props.value}</h3>
      {/* slider input */}
      <input
        {...props.sliderProps}
        type="range"
        value={props.value}
        onChange={props.onChange}
      />
    </div>
  );
}
//  export range slider component
export default RangeSlider;

Ausgang:

Die obige Ausgabe zeigt, wie die wiederverwendbare RangeSlider-Komponente wie eine normale Komponente funktioniert. Außerdem können Benutzer den aktuellen Wert des Bereichsschiebereglers auf dem Bildschirm sehen.

Verwenden Sie die multi-range-slider-react-Bibliothek, um einen Multi-Range-Slider in React zu erstellen

Wir haben den einzelnen Bereichsschieberegler im obigen Beispiel erstellt und wiederverwendet. Jetzt erstellen wir den Multi-Range-Slider mit der integrierten React-Bibliothek multi-range-slider-react.

Der Multi-Range-Schieberegler ermöglicht es Benutzern, die Mindest- und Höchstwerte separat einzustellen.

Um die multi-range-slider-react-Bibliothek in der React-App zu verwenden, müssen Benutzer sie zuerst installieren. Um die Bibliothek multi-range-slider-react in der Anwendung zu installieren, öffnen Sie das Terminal im Verzeichnis der React-App und führen Sie den folgenden Befehl aus:

npm install multi-range-slider-react

Danach können wir die Bibliothek in die React-App importieren und die Komponente MultiRangeSlider verwenden. Außerdem können wir einige Werte als Prop in der Komponente MultiRangeSlider übergeben.

Die Struktur zur Verwendung der Komponente MultiRangeSlider ist unten angegeben.

<MultiRangeSlider min={0} max={50} step={2} minValue={mini} maxValue={maxi} onInput={(e) => { handleChangeInput(e); }} />

Wir haben hier den vollständigen Beispielcode geschrieben, um die Komponente MultiRangeSlider zu verwenden. Es ruft die Funktion handleChangeInput() auf, wenn Änderungen in der Eingabe auftreten.

Beispielcode:

// import required libraries
import React, { useState } from "react";
import MultiRangeSlider from "multi-range-slider-react";
function App() {
  // set the initial minimum and maximum value for the multi-range slider
const [mini, changeMinValue] = useState(2);
const [maxi, changeMaxValue] = useState(13);
// whenever input changes, set a new value for mini and maxi
const handleChangeInput = (e) => {
	changeMinValue(e.minValue);
	changeMaxValue(e.maxValue);
};
return (
    <div >
    {/* rendering mini and maxi value on the DOM */}
    <h3>Current Minimum Value Of slider is: {mini}</h3>
    <h3>Current Maximum Value Of slider is: {maxi}</h3>
    {/* using the MultiRangeSlider Component */}
		<MultiRangeSlider
	        min={0}
		    max={50}
	        step={2}
		    minValue={mini}
		    maxValue={maxi}
	        onInput={(e) => {
			   handleChangeInput(e);
		    }}
		/>
	</div>
	);
}
export default App;

Ausgang:

In der obigen Ausgabe können Benutzer sehen, dass der Schieberegler für mehrere Bereiche das Festlegen der Mindest- und Höchstwerte auf dem Schieberegler ermöglicht.

Wir haben in diesem Artikel gelernt, Single-Range- und Multi-Range-Schieberegler zu erstellen und die wiederverwendbare Komponente für beide verwendet.