Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Fermée
  • Quelque chose ne va pas ?
#470 15 commentaires 2 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
react-native, typescript
Domaine
frontend

Piste de recherche

Commencez par reproduire l’exemple de Slider de l’issue avec les presets responsive iPhone et iPad Pro du navigateur, puis comparez la position de l’élément avec la zone active de glissement à la souris. Aucun fichier source ni test n’est identifié dans le rapport ; le travail est considéré comme terminé lorsque les clics et les glissements utilisent systématiquement les limites visibles du slider sur le preset le plus grand.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
1.4k
Forks
295
Aucune PR mergée en 30 j

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-slider

Toutes les issues de callstack/react-native-slider

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.