Zum Hauptinhalt springen

Schieberegler

Schieberegler in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen über das richtige Design eines Schiebereglers und die verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Sie können einem Benutzer die Möglichkeit geben, einen numerischen Wert auszuwählen, indem Sie einen Ziehpunkt über einen Balken schieben.

<Slider
  label="Slider"
  secondaryLabel="Choose Value"
/>

Beispiel für Min und Max​

Sie können einen Minimal- und einen Maximalwert angeben, den ein Benutzer mithilfe der Komponente auswählen kann.

<Slider
  label="Slider"
  secondaryLabel="Choose Value"
  min={5}
  max={10}
/>

Beispiel für einen Bereich​

Sie können die Eigenschaft range hinzufügen, damit ein Benutzer einen Wertebereich auswählen kann. Dadurch wird ein zweiter Ziehpunkt hinzugefügt, den der Benutzer verschieben kann.

<Slider
  label="Select Range"
  secondaryLabel="Choose Values"
  range
/>

Beispiel für einen minimalen Bereich​

Sie können die Mindestgröße des Bereichs begrenzen, der vom Benutzer ausgewählt werden kann. Wenn der Benutzer versucht, einen kleineren Bereich auszuwählen, bewegt sich der andere Ziehpunkt nach Möglichkeit ebenfalls, um den Mindestabstand zwischen den beiden Punkten beizubehalten.

<Slider
  label="Select Range"
  secondaryLabel="Choose Values"
  range
  minimumRange={10}
/>

Beispiel für OnChange​

Sie können eine Funktion auslösen, wenn der Wert geändert wird.

<Slider
  label="Select Value"
  secondaryLabel="Choose Value"
  onChange={(event, value) => console.log('The value chosen is', value)}
/>

Beispiel für OnChange-Bereich​

Wenn Sie den Schieberegler in den Bereichsmodus versetzen, ist der ausgegebene Wert ein Array von [minimum selected, maximum selected].

<Slider
  label="Select Range"
  secondaryLabel="Choose Values"
  onChange={(event, value) => console.log('The values chosen are', value)}
/>