Can't apply smaller width, or padding on right side

[ppozniak]

Hello there. I'm getting pretty desperate, as I've tried doing everything to make this look, however the right marker always seems to be out of screen. Applying width or padding, or even margin to containerStyles doesn't do the trick.

Here's the code

import React from 'react';
import Slider from '@ptomasroos/react-native-multi-slider';
import theme, { Text } from '@common';
import styled from 'styled-components';

const Container = styled.View`
  height: auto;
  flex: 1;
  margin-top: -15px;
  width: 100%;
`;

const SliderWrapper = styled.View`
  width: 85%;
  padding-right: 40px;
  margin-right: 40px;
  height: auto;
`;

const TimeLabelsWrapper = styled.View`
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
`;

const TimeLabel = Text.extend`
  width: auto;
`;

const containerStyle = {
  height: 'auto',
};

const trackStyle = {
  height: 5,
  borderRadius: 5,
};

const selectedStyle = {
  backgroundColor: theme.orange,
};

const unselectedStyle = {
  backgroundColor: theme.darkGray,
};

const markerStyle = {
  backgroundColor: theme.primary,
  width: 26,
  height: 26,
  borderRadius: 26,
};

const pressedMarkerStyle = {
  width: 29,
  height: 29,
};

export default function AvailabilitySlider(...props) {
  return (
    <Container>
      <TimeLabelsWrapper>
        <TimeLabel bold size={13}>
          12:00 AM
        </TimeLabel>
        <TimeLabel bold size={13}>
          9:00 AM
        </TimeLabel>
      </TimeLabelsWrapper>

      <SliderWrapper>
        <Slider
          {...props}
          trackStyle={trackStyle}
          containerStyle={containerStyle}
          selectedStyle={selectedStyle}
          unselectedStyle={unselectedStyle}
          markerStyle={markerStyle}
          pressedMarkerStyle={pressedMarkerStyle}
          values={[0, 5]}
        />
      </SliderWrapper>
    </Container>
  );
}

[cmcaboy]

I am running into the same problem. Would like to know if there is a workaround.

[cmcaboy]

His slider does take a property called "sliderWidth" that accepts a number as the width of the slider. sliderWidth={250} It is 280 by default.

[ptomasroos]

Hi there! Sorry for not being able to respond sooner. I'm very fed up with work coming weeks and won't be able to help out here before the beginning of April most likely. Hope the community can help out.

[ppozniak]

@cmcaboy for me it was sliderLength and yeah setting it to 250 made it look good. However I think this still would be better if you could use percentages. Also I'm not quite sure the differences between sliderWidth and sliderLength.

[ppozniak]

@ptomasroos Could you please give us a hint what's the difference between sliderWidth and sliderLength or if there's a quick way to make these values accept values like 100% or auto

[ptomasroos]

Can you please point me to where sliderWidth is used?

[ppozniak]

Sorry for confusion. It was the previous comment that mentioned sliderWidth. That slider uses sliderLength.

So any way to make this value dynamic? i.e 100%

[cmcaboy]

It is sliderLength. Sorry. I misspoke.

[bulats]

I'm also wondering if it's possible to use percentage values instead of absolutes. So the slider would take up an entire width of the screen both vertically and horizontally.

[jahnique]

To get a relative slider length you could make use of react-native's window dimensions and optionally consider to remove the container's left and right padding:

import { Dimensions } from 'react-native';
import MultiSlider from '@ptomasroos/react-native-multi-slider';

...

render () {
  const { width } = Dimensions.get('window');
  optionalPadding = 10;
  const mySliderLength = width - 2 * optionalPadding;

  <MultiSlider
    ...
    sliderLength={mySliderLength}
  />
}