Skip to content

Remove space before and after the slider bar #98

Open
@canyavall

Description

@canyavall

When a new Slideer is created, it is created inside a view and I can see an space before and after the slider (just set backgroundColor='red' on the style)

This is quite annoying in order to make it if with other components as the slider is always a bit smaller

Is this done in purpose? Can those spaces (padding or margin) be removed and make the bar use 100%

I tried setting the padding, margin, left, right to 0, but nothing...

Activity

ogabrielsantos

ogabrielsantos commented on Oct 17, 2019

@ogabrielsantos

You could temporarily put it inside a view with negative margins:

<View style={{ marginLeft: -10, marginRight: -10 }}>
  <Slider />
</View>
brunoziie

brunoziie commented on Mar 18, 2020

@brunoziie

This behavior affects both platforms?

moriyuu

moriyuu commented on Jun 14, 2020

@moriyuu
Contributor

Is this issue still alive? I'd like to work on this issue but the example app doesn't reproduce this.

charitha95

charitha95 commented on Jan 27, 2021

@charitha95

Or with marginHorizontal: -10

lucidlive

lucidlive commented on Apr 12, 2021

@lucidlive

I see this issue only on Android. I applied the following style to the slider:

marginLeft: Platform.select({ ios: 0, android: -15 }),
marginRight: Platform.select({ ios: 0, android: -15 })

Kinda annoying but it works.

lirkang

lirkang commented on Jun 27, 2022

@lirkang

I see this issue only on Android. I applied the following style to the slider:

marginLeft: Platform.select({ ios: 0, android: -15 }),
marginRight: Platform.select({ ios: 0, android: -15 })

Kinda annoying but it works.

it works, thanks

Chr1k0

Chr1k0 commented on Jul 19, 2023

@Chr1k0

The issue seems to be still there. The "margin trick" works on android for me but it causes that one tick extra is added to the upper/right limit - with no change in value. so not very useful. :(

matt-dalton

matt-dalton commented on Aug 17, 2023

@matt-dalton

Anyone got an idea of how to select the margin values - are you just doing it by eye? It looks better with -3 for iOS on our app, but unsure if this is due to different screen sizes/resolutions etc.
Is setting a constant value for each platform robust?

AlexanderHott

AlexanderHott commented on Jul 18, 2024

@AlexanderHott

Any update on this, I still see this on version 4.5.2

self-assigned this
on Sep 11, 2024
moved this from To be analyzed to In Progress in Slider-Boardon Sep 11, 2024
linked a pull request that will close this issue on Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bug reportSomething isn't working

Type

No type

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

    Development

    Participants

    @brunoziie@ogabrielsantos@canyavall@draggie@lucidlive

    Issue actions

      Remove space before and after the slider bar · Issue #98 · callstack/react-native-slider