Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Unable to move the thumb position from outside the slider when having a custom thumbImage

Offen
#712 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
react-native, typescript
Bereich
mobile

Rechercherichtung

Beginne damit, das kontrollierte Slider-Beispiel mit einem benutzerdefinierten thumbImage zu reproduzieren, und vergleiche es mit dem Standardverhalten des Thumbs. Verfolge, wie externe Wertänderungen angewendet werden, wenn thumbImage gesetzt ist; abgeschlossen ist die Aufgabe, wenn das Drücken der Schaltfläche den benutzerdefinierten Thumb wie ohne benutzerdefiniertes Bild an Position 0 bewegt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug report

Environment

  • react-native info output:
// react-native info
Expo v53
  • are you using the new architecture?
    yes

  • which version of react & react-native are you using?
    React 19 and React Native v0.79.2

Description

When having a custom thumbImage, the position of the thumb is not able to be updated from outside the Slider. For example, if you have a useEffect that change the value of the slider, the thumb position is being moved when thumbImage is by default. However, with a custom thumbImage, it's not the case.

Reproducible Demo

If you have something like this, clicking the button should move well the thumb position to position 0:

const [value, setValue] = useState<number>(20)
return (
    <>
          <Button
            title={'Change value'}
            onPress={(): void => setValue(0)}
          />
          <View style={tw`justify-center`}>
            <Slider
              minimumValue={0}
              maximumValue={100}
              step={5}
              value={value}
              onValueChange={handleChange}
              minimumTrackTintColor="#62A6E433"
              maximumTrackTintColor="#62A6E433"
              thumbTintColor={'#62A6E4'}
            />
    </>
)

However, if you add a custom thumbImage, when clicking the button, the thumb position does not go to position 0:

const [value, setValue] = useState<number>(20)
return (
    <>
          <Button
            title={'Change value'}
            onPress={(): void => setValue(0)}
          />
          <View style={tw`justify-center`}>
            <Slider
              minimumValue={0}
              maximumValue={100}
              step={5}
              value={value}
              onValueChange={handleChange}
              minimumTrackTintColor="#62A6E433"
              maximumTrackTintColor="#62A6E433"
              StepMarker={(): ReactElement => <View style={tw`h-5`}></View>}
              thumbTintColor={'#62A6E4'}
              thumbImage={require('@src/assets/images/SliderThumb.png') as ImageURISource}
            />
    </>
)
Vorherrschende Sprache
TypeScript
Sterne
1.4k
Forks
295
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus callstack/react-native-slider

Alle Issues in callstack/react-native-slider

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.