Skip to main content

Slider

The Slider component is a control that allows users to select a value within a range.

Import​

Phaselis exports one main component for Slider.

import { Slider } from "phaselis";
  • Slider: Main Component import for Slider

Usage​

Basic Slider​

import { Slider } from "phaselis";

const Example = () => {
  return <Slider value={50} minValue={0} maxValue={100} />;
};

export default Example;

Props​

tip

You can pass additional props compatible with the SliderCore component from @react-native-community/slider.

value​

number | string

The current value of the slider. Can be either a number or a string.

<Slider value={75} />

onChange​

function

Callback function called when the slider value changes.

<Slider
  onChange={(e, value) => console.log("New slider value:", value)}
/>

minValue​

number

The minimum value of the slider. Default is 0.

<Slider minValue={10} />

maxValue​

number

The maximum value of the slider. Default is 100.

<Slider maxValue={200} />

step​

number

The step size of the slider. Default is 10.

<Slider step={5} />

tapToSeek​

boolean

Allows changing the value by tapping on the slider. Default is true.

<Slider tapToSeek={false} />

disabled​

boolean

If true, the slider will be disabled and the user will not be able to interact with it.

<Slider disabled />

inverted​

boolean

Inverts the slider. Default is false.

<Slider inverted />

renderStepNumber​

boolean

Renders step numbers. Default is false.

<Slider renderStepNumber />

style​

NameTypeDescription
containerViewStyleStyle for the slider's outer container view.
elementViewStyleStyle for the slider's track and thumb.

You can style the slider with the style prop using either an object with named styles or directly provide ViewStyle properties that will be applied to the slider element.

// Object with named styles
<Slider
  style={{
    container: {
      paddingHorizontal: 15,
      marginVertical: 20,
      backgroundColor: "#d8eeff",
      borderRadius: 8,
    },
    element: {
      backgroundColor: "#eef8ff",
      borderRadius: 4,
    },
  }}
/>

// Direct element styling
<Slider
  style={{ height: 40, backgroundColor: '#f0f0f0', borderRadius: 10 }}
/>

containerStyle​

ViewStyle

Additional style applied directly to the container View.

<Slider 
  value={50} 
  containerStyle={{ marginVertical: 20, paddingHorizontal: 10 }} 
/>