ptomasroos/react-native-multi-slider

Android and iOS Pure JS react native multi slider

react-native-multi-slider's Issues

Tick marks with snap?

Snap works great but I would like to display tick marks so the user can see where markers should snap to. Is this possible?

Example doesn't work

but it work if import ptomasroos/react-native-multi-slider here https://github.com/ptomasroos/react-native-multi-slider/blob/master/example/Example.js#L14

Updating from 0.0.8 to 0.0.10 caused onValuesChangeStart to cease functioning- but onValuesChangeFinish still works

Nothing else changed except my updating @ptomasroos/react-native-multi-slider from "0.0.8" to "0.0.10" in package.json and reinstalling/linking the node module.

What's especially weird is that onValuesChangeStart is not firing, but onValuesChangeFinish is- despite me giving them the same exact code save for "Start" and "Finish"

Has anyone else had this problem? It has the same issue regardless of if it's a single-value MultiSlider or a multi-value MultiSlider. I'll provide some of my (relevant) code but, given that it worked in 0.0.8, I'm not sure that it will be of much help.

Settings.js

<SettingsSlider
    multi={false}
    title="Foo"
    onSlidingStart={() => {
        this.setState({sliding: true});
    }}
    onValuesChange={(distance) => {
        this.setProperty('searchDistance', distance)
    }}
    onSlidingStop={() => {
        this.setState({sliding: false});
    }}
    minimumValue={0.1}
    maximumValue={5}
    value={this.state.settings.foo}
    step={0.1}
    valueText={this.state.settings.foo}
/>

SettingsItem.js

class SettingsSlider extends Component {

    checkIfMultiSlider() {
        if (this.props.multi) {
            return (
                <MultiSlider style={{ width: 0.8 * width }} min={this.props.minimumValue} max={this.props.maximumValue} values={[this.props.minSetValue, this.props.maxSetValue]} selectedStyle={{backgroundColor: '#157EFA'}} markerStyle={{borderWidth: 0.5, borderColor: 'lightgray', backgroundColor: '#FFF'}} onValuesChangeStart={() => this.props.onSlidingStart()} onValuesChange={(value) => this.props.onValuesChange(value)} onValuesChangeFinish={() => this.props.onSlidingStop()} />
            );
        } else {
            return (
                <MultiSlider style={{ width: 0.8 * width }} min={this.props.minimumValue} max={this.props.maximumValue} values={[this.props.value]} step={this.props.step} selectedStyle={{backgroundColor: '#157EFA'}} markerStyle={{borderWidth: 0.5, borderColor: 'lightgray', backgroundColor: '#FFF'}} onValuesChangeStart={() => this.props.onSlidingStart()} onValuesChange={(value) => this.props.onValuesChange(value)} onValuesChangeFinish={() => this.props.onSlidingStop()} />
            )
        }
    }

    render() {
        return (
            <TouchableHighlight style={{borderColor: 'lightgray', borderWidth: 1, height: 120, backgroundColor: 'white'}}>
                <View style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' }}>
                    <View style={{ width, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingBottom: this.props.multi ? 70 : 70, paddingTop: this.props.multi ? 30 : 30 }}>
                        <Text style={{marginLeft: 15}}>{this.props.title}</Text>
                        <Text style={{color: 'gray', marginRight: 37}}>{this.props.valueText}</Text>
                    </View>
                    {this.checkIfMultiSlider()}
                </View>
            </TouchableHighlight>
        );
    }

}

Again, this code worked perfectly in 0.0.8. I only included what I thought was relevant but if more is needed I can provide it.

Allow out of range numbers

How can I handle cases when one of the values are out of range?
like the slider's min: 0 max: 100
but the values[1] is 1000

Update react-native peer dependency

react-native 0.39.2 is out but using it causes an npm warning from react-native-multi-slider.

Bottom margin

Hi,

It looks like the component has a significant bottom margin included with it. Can you please remove it? So the developer can choose whatever margin is needed for the project. Thanks!

touchDimensions not used

touchDimensions.height and touchDimensions.width don't seem to be used for anything in MultiSlider.js?

Add ability to limit how often onValuesChange fires

I'm currently running some calculations every time the value changes when I'm sliding it, but I would like it to only fire the onValuesChange method a couple times every second.

Is there a way to limit this currently? I wasn't able to see anything popping out at me in the source code for this project. If not could it possibly be added?

weird bug on multiple values

the image above has the following configs

values: [100, 199]
min: 0
max: 299

these values are set dynamically, is this a problem?

Markers

Which property would I call in order to change the style of the markers?

Currently the markers go over the side of the line and I am trying to get the edge of the marker to touch the edge of the line.

This is what it looks like in case my description wasn't helpful:
https://imgur.com/a/GKp2y

The top image is what I want, the bottom image is what is currently happening.

Create a small documentation?

Android(bug):Does not work with Navigator gestures

When Navigator gestures are turned on the gestures take over and the and instead of the slider moving the screen gets dragged to the previous/next scene.

"@ptomasroos/react-native-multi-slider": "0.0.6",

"react": "15.4.1",

"react-native": "0.39.0",

Please update the NPM with the latest changes

Hey,

Be great to have the latest changes in the NPM. It's currently at 0.0.12 from 3 months ago!

Thanks!

Using native sliders to make range slider

I am trying to make a range slider using the native <Slider> component. My goal is native perf and perfect native look.

My goal is to on press down, it should grab the slider that the press it is closest to. I have been trying for about a day with various stuff but can't figure it out.

I created a snack here: https://snack.expo.io/@noitsnack/rangeslider-cannot-move-one-in-back

I was wondering if you wanted to help me pursue this idea. I'm close but not quit there.

Here is a screenshot, the dot on the left is the slider in the back. I position the sliders on top of each other by using position: 'absolute'.

It leads to some issues, like not being able to slide the one underneath. And preventing overlap is another.

Markers override each other

Hello.
first, thanks for the very useful library.
I have a little problem: when the markers are too close it overrides each other

Do you have any solution? thanks.

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

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>
  );
}

Cannot read property bool of undefined

When i import the MultiSlider this error shows up

Custom track style doesn't center the marker

I'm trying to make a slider with a custom trackStyle but whenever I give it a different height, the marker doesn't adjust to the center.

My slider:

<Multislider
  trackStyle={{height: 15}}/>

MultiSlider min, max and values props cannot be reset after first Mount

Hey I have a situation where when the MultiSlider first mounts my max and min values are undefined because the system is still retrieving them. Shortly after they arrive and componentWillReceiveProps is triggered and the proper values set to state . The MultiSlider doesn't seem to react to the state change however and the markers stay at 0,0. The Text components showing the current range are set correctly however, but when I try to move the markers the text components change to a range of 0-0 and the right marker jumps to the far right.

Is there something I'm doing wrong here? Can I get the markers and min/max to update properly?

My Code:

export class RangeMultiSlider extends React.Component{
  constructor(props){
    super(props);
    console.log('this.props', this.props)
    this.state = {
      sliderValues: [this.props.min, this.props.max],
      min: this.props.min,
      max: this.props.max
    };
  }

  onChangeValues = (values) => {
    console.log('Slider values', values)
    //console.log('this.props', this.props)
    this.setState({
      sliderValues: [values[0], values[1]]
    });
  }

  onChangeValuesFinish() {
    if (this.props.currentRefinement.min !== this.state.sliderValues[0] || this.props.currentRefinement.max !== this.state.sliderValues[1]) {
      this.props.refine({min: this.state.sliderValues[0], max: this.state.sliderValues[1]});
    }    
  }

  componentWillReceiveProps(nextProps){
    if(nextProps.min !== this.state.min && nextProps.max !== this.state.max) {
      console.log('nextProps', nextProps)
      this.setState({
        sliderValues: [nextProps.min, nextProps.max],
        min: nextProps.min,
        max: nextProps.max
      });   
    }
  }

  render(){
    console.log('sliderValues', this.state.sliderValues)
    return(
    <View style={{padding:8}}>
      <Text style={{paddingLeft: 10, fontSize: 14, color: Colors.primaryTextColor, alignSelf: 'flex-start' , textAlign: 'left'}}>
        {`${this.props.header}:`}
      </Text>
      <View style={{paddingTop: 20, paddingLeft: 8}}>
        <MultiSlider
          sliderLength={150}
          selectedStyle={{backgroundColor: Colors.mainColor}}
          unselectedStyle={{backgroundColor: 'silver'}}
          containerStyle={{height:10}}
          //trackStyle={{height:10, backgroundColor: 'red'}}
          touchDimensions={{
              height: 40,
              width: 40,
              borderRadius: 20,
              slipDisplacement: 40,
          }}
          onValuesChange={(sliderState) => this.onChangeValues(sliderState)}
          min={this.state.min}
          max={this.state.max}
          //values={[this.props.currentRefinement.min, this.props.currentRefinement.max]}
          onValuesChangeFinish={() => this.onChangeValuesFinish()}
          values={[this.state.sliderValues[0], this.state.sliderValues[1]]}
          step={1}
          customMarker={SliderMarker}/>
      </View>
      <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
        <Text style={{fontSize: 14, color: Colors.primaryTextColor, textAlign: 'left'}}>
          {this.state.sliderValues[0]}
        </Text>
        <Text style={{fontSize: 14, color: Colors.primaryTextColor , textAlign: 'right'}}>
          {this.state.sliderValues[1]}
        </Text>
      </View>
    </View>
    )
  }
}

Here is the console output:

this.props {refine: ƒ, currentRefinement: {…}, header: "Price", min: undefined, max: undefined}
sliderValues (2) [undefined, undefined]
nextProps {refine: ƒ, currentRefinement: {…}, header: "Price", min: undefined, max: undefined}
sliderValues (2) [undefined, undefined]
sliderValues (2) [undefined, undefined]
sliderValues (2) [undefined, undefined]
nextProps {refine: ƒ, currentRefinement: {…}, header: "Price", min: 7.99, max: 79.99}
sliderValues (2) [7.99, 79.99]
sliderValues (2) [7.99, 79.99]

sliderValueChangeStart not firing

Should this...

startOne = () => {
    if (this.state.enabledOne) {
      this.props.onValuesChangeStart();
      this.setState({
        onePressed: !this.state.onePressed,
      });
    }
  };

  startTwo = () => {
    if (this.state.enabledTwo) {
      this.props.onValuesChangeStart();
      this.setState({
        twoPressed: !this.state.twoPressed,
      });
    }
  };

be this?

startOne = () => {
    if (this.props.enabledOne) {
      this.props.onValuesChangeStart();
      this.setState({
        onePressed: !this.state.onePressed,
      });
    }
  };

  startTwo = () => {
    if (this.props.enabledTwo) {
      this.props.onValuesChangeStart();
      this.setState({
        twoPressed: !this.state.twoPressed,
      });
    }
  };

[Request] show min max values below marker position

show min max values below the marker and update the values as the marker position changes

Docs

Are there any docs for this? Super confused as the api seems to be the same as this package but there is no reference to it as far as I can see.

Thanks, Jon

Values on multislider always starts at [0, 0] with redux.

Hello!
So my problem is that my markers always start at 0, even though my initial state in my reducer is [18, 25].
Anyone knows how to solve this?

My code looks like this:

class multiSlider extends PureComponent{
    render(){
        const {
            _setSliderState,
            _setSliderValue,
            _sliderState,
            _sliderValue
        } = this.props;
        return(
            <View style={{alignItems: "center", justifyContent: "center"}} >
            
                <MultiSlider
                    values={[_sliderValue[0], _sliderValue[1]]}
                    sliderLength={width - 40}
                    min={18}
                    max={55}
                    onValuesChange={(values) => _setSliderValue(values)}
                    selectedStyle={{
                        backgroundColor: 'rgb(164, 39, 141)',
                    }}
                    trackStyle={{
                        height:5,
                    }}
                    touchDimensions={{
                        height: 200,
                        width: 40,
                        borderRadius: 30,
                        slipDisplacement: 40,
                    }}
                    customMarker={CustomMarker}
                />
            </View>
        )
    }
}

Allow vertical orientation

Hello,

I would like to use this component vertically, do you think it is possible ?

The left marker was disappeared frequently

The left marker was disappeared when I slided it left to right and right to left

Example doesn't work in my shiny new xcode 8

react-native version is to old. update it?

Slider laggy with react-native-navigation

• I have searched existing issues
• I am using the latest multi slider version

If I use this component alone - it works perfect.
But if I use it with react-native-navigation with drawer enabled, once I swipe react-native-multi-slider - it slides a bit and stuck and then drawer is opening.

Default React Native Slider works perfect with react-native-navigation + drawer without lagging.

Steps to Reproduce

react-native-navigation with drawer enabled + react-native-multi-slider

Expected Behavior

Slider should continue to slide.

Actual Behavior

Slider slides a bit then stack and drawer opens.

Vertical Orientation

Does this package support vertical orientation? If not will this be added to the package sometime?

Two or more multisliders revert to values={} position on updateState

I have two MultiSliders in a Form which contains an Age Range selector and Height range selector.

Everything works fine until the following steps:

1. Select (drag the markers) to a desired position from MultiSlider No. 1
2. Update state onValuesChange
3. Select (drag the markers) to a desired position from MultiSlider No. 2
4. Update state onValuesChange

Now MultiSlider No. 1 markers are reverted back to its original position

If now i make changes on MultiSlider No. 2 it reverts markers from MultiSlider No. 1 to its original positions. (without actually updating the state, only the markers are reverted)

    ...
    this.state = {
      ageRange: '21,36',
      ageRangeText: '21-36',
      heightRange: [],
      heightRangeText: HeightConverter(175) + '-' + HeightConverter(190)
    }
    ...

    <MultiSlider key={1} values={[21,36]} step={1} min={18} max={70} sliderLength={SLIDER_WIDTH} 
            onValuesChange={(data) => {
              this.setState({
                ageRange: data[0] + ',' + data[1],
                ageRangeText: data[0] + '-' + data[1]
              });
            }}
          />
     ...
     <MultiSlider key={2} values={[175,190]} step={1} min={140} max={220} onValuesChange={(data) => {
              this.setState({
                heightRange: data,
                heightRangeText: HeightConverter(data[0]) + '-' + HeightConverter(data[1])
              })
            }} 
            sliderLength={SLIDER_WIDTH} />

Custom Marker keeps flickering on every render

I'm trying to set up a slider with a custom marker that moves with a an updating value. But every time a render is called the Custom marker flickers and makes it hard to grab. If I remove the custom marker the standard marker works perfectly, no flickering and easy to grab.

Here is my slider:

<Multislider
  customMarker={() => <Image source={scrubber}/>}
  sliderLength={Dimensions.get('window').width - 40}
  touchDimensions={{width: 50, height: 50}}
  values={[Math.round(slowRacer.currentIndex || 0)]}/>

Question about moveOne()

`moveOne = gestureState => {
if (!this.props.enabledOne) {
return;
}

var unconfined = gestureState.dx + this.state.pastOne;
var bottom = 0;
var trueTop = this.state.positionTwo - (this.props.allowOverlap ? 0 : this.stepLength);
var top = trueTop === 0 ? 0 : trueTop || this.props.sliderLength;
var confined = unconfined < bottom
  ? bottom
  : unconfined > top ? top : unconfined;`

...

` moveTwo = gestureState => {
if (!this.props.enabledTwo) {
return;
}

var unconfined = gestureState.dx + this.state.pastTwo;
var bottom = this.state.positionOne + (this.props.allowOverlap ? 0 : this.stepLength);
var top = this.props.sliderLength;
var confined = unconfined < bottom
  ? bottom
  : unconfined > top ? top : unconfined;`

In the source code, why does each PanResponder calculate the boundary position in different way? Is there any significant reason that moveOne should calculate trueTop? Isn't it enough
var top = this.state.positionTwo - (this.props.allowOverlap ? 0 : this.stepLength);
without trueTop, looks like more symmetric with moveTwo?

The value range are only for 0 to 10?

I used multi-slider and set the value for example [20,50], bit it doesn't work, it only work when I set value [0.10] or [3,7] .., so it seems the value range are limited in 0~10 ?

Publish version next to NPM

The latest changes from d99c326 are not available via NPM.

how can set size for custom marker ?

I had try set width for custom Marker, but not working, it is util keep old size

Multiple slider

I have a component which use 2 different Slider.
One of the Slider is a simple one with 1 marker, the second one have 2 markers.

<MultiSlider
  values={[this.state.search_distance]}
  onValuesChange={this.searchDistanceValuesChange}
  trackStyle={{height:2}}
  selectedStyle={{backgroundColor: '#f77268'}}
  containerStyle={{height:20,}}
  sliderLength={_width-50}
  customMarker={CustomMarker}
  min={0}
  max={5000}
  step={1}
  allowOverlap
  snapped
/>

<MultiSlider
  values={[this.state.ageRange[0], this.state.ageRange[1]]}
  onValuesChange={this.multiSliderValuesChange}
  trackStyle={{height:2}}
  selectedStyle={{backgroundColor: '#f77268'}}
  containerStyle={{height:20,}}
  sliderLength={_width-50}
  customMarker={CustomMarker}
  min={18}
  max={99}
  step={1}
  allowOverlap
  snapped
/>

When i change the value of the 1 marker slider, everything is ok.
When i change the value of the 2 markers slider, the marker of the first slider move to the left of the track.

When i console.log into componentWillReceiveProps of the library, i see that both instance are called whenever a value is changed.

Stop working on latest RN 0.49.3

Build is successful, but running on Android simulator brings an error:

undefined is not an object (evaluating 'PropTypes.bool')

with references to files in node_modules/react-native-multi-slider/
mockProps.js:15:23
Slider.js:16:24
along with plenty of /metro-bundler/src/Resolver/polifills/require.js

Worked fine on RN 0.48.4
Any suggestions, perhaps?

Tap and move slider

I want to move the slider by tapping on the slider not just sliding by the marker. I can't find any prop or default settings to do it. Please can you help asap.

New npm release

Hello @ptomasroos - It seems that the last npm release is from Aug 17, while many commits came in the past months.
When using the npm latest (0.3.6) I am getting code that break with react 16 and react-native .53. Especially in node_modules/react-native-multi-slider/mockProps.js I have
'use strict';

var React = require('react');
var ReactNative = require('react-native');
var {
  PropTypes // ====> break with react 16
} = React;

Shall we take the latest in master branch rather than the npm latest version ? Any plan to issue a new version in npm ?

Tactac

Marker size on Android

Thank you for library. It's only way to make filters on android, but I have issue.

When I touch marker and release it, marker getting small. For the next time, it will returns to initial size. It is only happened with delay on touch out, only on Android.

I see, it should be like native Android slider (regular size marker - touch in - big size marker - touch out - regular size marker), but it's not. Can you help?

MultiSlider can't display completely in android

Hi,
Thanks for your react-native-multi-slider.
I use MultiSlider run it in my android emulator but can't display completely.
My package.json info is:
"dependencies": {
"babel-preset-react-native-stage-0": "*",
"react": "^15.3.1",
"react-native": "^0.32.0",
"react-native-carousel": "^0.10.0",
"react-native-form-generator": "^0.9.9",
"react-native-multi-slider": "^0.3.5",
"react-native-navigation": "file:../",
"react-native-picker": "^3.0.5",
"react-native-scrollable-tab-view": "^0.6.0",
"react-native-slider": "^0.9.1",
"react-native-swiper": "^1.4.11",
"react-native-vector-icons": "^2.1.0",
"react-redux": "^4.0.6",
"redux": "^3.0.5",
"redux-logger": "^2.6.1",
"redux-thunk": "^1.0.3",
"rn-bootstrap-buttons": "^1.0.4",
"seamless-immutable": "^5.0.1"
}

disable prop for multislider component

Hi and first off thanks for the good component I would love to use on my app, but I cannot at the moment because I can't find a way to disable both markers (I have an edit screen component that must render the slider component 'disabled and greyed out' if user is not in 'edit' mode).
Do you plan to add this functionality in the near future?
Cheers

error: positionOne is not defined

Hey,

I'm getting an error using your plugin:

Looking at the code, shouldn't line 152 of MultiSlider.js be:
var positionOne = valueToPosition(...
not
positionOne = valueToPosition(...

Same goes for positionTwo - line 161.

Doing this fixes my errors.

Less Detail Documentation

• I have searched existing issues
• I am using the latest multi slider version

I am new in react native and i haven't used slider. I have read doc but unknown api to use. i have comparison with api slider rn official and issues post but its different.

thanks

Slider callback not working

Callback value is not updating when sliding bar. It can be seen also on example gif.

Edit1: typos in
sliderOneValuesChangeStart
sliderOneValuesChange
sliderOneValuesChangeFinish

• first letter was capital. Fixing this causes:
  "undefined is not a function (evaluating 'this.setState({sliderOneChanging:true})')

Need to update latest version with npm

I'm finding this multi-slider really handy, but the library in npm is out of date; when I install I am not getting your most recent changes. Would you be able to update that?

I would really love to use the enable/disable functionality you added a few months back but I'm not getting those changes when I npm install.

Disable logging(console.log)

I would like to disable logging when there is a change in the values. Is there a way to that?

RTL - Touch is reversed

Hey,

I am using the latest version of the react-native-multi-slider on an RTL app.
When testing and using I18nManager.forceRTL(true) the slider looks to function correctly until you try and move one of the markers.

What happens is that if you slide your finger right, the marker goes left. If you slide your finger left, the marker goes right.

I have managed to reproduce this issue on a clean project (iOS + Android).

I searched a bit here and saw that there was a PR for RTL support. I didn't have much time to read the changes but it seems it doesn't work / it stopped working.

Would love if this could be fixed!

Best,
Amit

Marker position is shifted for Snapped

When you enable snapped, marker is shifted by one value to the right.
It's not noticeable for high values, but totally not usable when you set max to low value e.g. max={4}.

This is <MultiSlider min={1} max={4} values={[1, 2]} /> but it shows 2 and 3 position.

There is incorrectly calculated index in converters.js.
I will send PR right away.

Allow custom left/right marker offsets

I want to adjust the left and right properties of markerContainerOne and markerContainerTwo respectively, to mimic the the react-native Slider's marker behavior (which uses marker outer edge as "value indicator", rather than the center of the marker like this component). However it seems the value 24 is hardcoded:

const markerContainerOne = { top: -24, left : trackOneLength - 24 }
const markerContainerTwo = { top: -24, right: trackThreeLength - 24 };

I'm not sure what the best solution to this is, perhaps adding custom offset props?

static defaultProps = {
  markerOffsetX: 0,
  markerOffsetY: 0,
 // ...
}

const { markerOffsetX, markerOffsetY } = this.props;
const markerContainerOne = { top: markerOffsetY - 24, left : trackOneLength + markerOffsetX - 24 }
const markerContainerTwo = { top: markerOffsetY - 24, right: trackThreeLength + markerOffsetX - 24 };

I can then do following to solve my problem.

<MultiSlider markerOffsetX={14} ...

Thoughts on this?

markerStyle not working when I disable the slider

Hello. I am setting enabledOne={false} and/or enabledTwo={false} to disable my component, but my custom markerStyle is returning to the original shape of the marker; i.e. markerStyle is not working when the marker is disabled. However, implementing a customMarker gave me the results I desire, but I think it's not easy for the developer to think of this solution immediately (I spent almost a week thinking about it). I really like your component since it's is almost the only one that provides multiple markers, so I am opening this issue for you to take into consideration this special case and either add it in the documentation or provide a fix for it. Thanks for the amazing component, and wish you more to go!