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

Slider "active area" is offset from where the actual element is

Geschlossen
  • Stimmt etwas nicht?
#470 15 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

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

Rechercherichtung

Beginne damit, das Slider-Beispiel im Issue mit den responsiven Presets für iPhone und iPad Pro des Browsers zu reproduzieren, und vergleiche dann die Position des Elements mit dem aktiven Bereich für das Ziehen mit der Maus. Im Bericht ist keine Quelldatei und kein Test angegeben; als erledigt gilt die Aufgabe, wenn Klicks und Ziehvorgänge die sichtbaren Slider-Grenzen beim größeren Preset konsistent verwenden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug report

Environment

System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 680.34 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8512546
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: javac 19 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

(Possibly) relevant deps from package.json:

    "@react-native-community/slider": "4.2.4",
    "@react-navigation/material-top-tabs": "6.2.1",
    "@react-navigation/native": "6.0.10",
    "@react-navigation/native-stack": "6.6.2",
    "expo": "~44.0.2",
    "expo-font": "~10.0.4",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "jsc-android": "^250230.2.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-calendars": "1.1289.0",
    "react-native-collapsible": "1.6.0",
    "react-native-pager-view": "5.4.9",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-tab-view": "3.1.1",
    "react-native-web": "0.17.1"

Description

I have a Slider component that works perfectly fine on browser simulated mobile phone environment (Chrome -> responsive "iPhone 6/7/8 Plus" preset). But when I use the slider on a bigger screen (Chrome -> responsive "iPad Pro" preset), the active range (where the slider starts moving with mouse drag) is far to the left from where the actual slider element is.

Let's say, the slider element is between width 750px and 900px:

  1. When I simply click on the slider, it goes automatically to maximumValue
  2. If I click & hold the slider, and then pull to the left side of the screen, nothing happens to the slider. It does not move.
  3. But when I reach the left edge of the screen (about 100px), then the slider starts to move with the mouse drag.

Here's a video. The first part is the "click makes it max value", and then comes the slider offset:

https://user-images.githubusercontent.com/5442750/209342148-200b56a4-8bda-4a1a-a495-d398c9423b03.mov

Reproducible Demo

const styles = StyleSheet.create({
  sliderBox: {
    flexDirection: 'row',
  },
});

interface Params {
  min: number;
  max: number;
  initialValue: number;
  bidToEdit: Bid;
  setter: Function; // This just passes the value to the parent, does not affect incoming params
}

export const CustomSlider = ({ min, max, initialValue, bidToEdit, setter }: Params) => {
  const [value, setValue] = useState<number>(initialValue);

  const sliderUpdated = (newValue: number) => {
    console.warn('Slider update to', newValue);
    setValue(newValue);
    setter(newValue);
  };

  return (
    <View style={styles.sliderBox}>
      <Slider
        value={value}
        step={1}
        onValueChange={sliderUpdated}
        minimumValue={min}
        maximumValue={max}
        minimumTrackTintColor={Colors.blue900Default}
        maximumTrackTintColor={Colors.blue50}
        thumbTintColor={Colors.blue900Default}
      />
      <SliderPoints value={value} updatePoints={sliderUpdated} min={min} max={max} />
    </View>
  );
};

I've also tried setting a maxWidth for the containing <View> but it doesn't change the behaviour.

I have also tried using onSlidingComplete and onSlidingStart, but the behaviour is still the same.

Vorherrschende Sprache
TypeScript
Sterne
1.4k
Forks
295
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

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.