显示滑块相对于滑块拇指的值，React Native。

Question

我想要像这个图片一样，根据滑块拇指的位置移动标签：

目前我的滑块是这样的：

我希望显示“30公里”标签与滑块拇指相关联，当滑块移动时，标签也应相应地移动。

我正在使用Native React Slider组件。

这是我的代码：

<Slider 
     style={styles.slider} 
     thumbTintColor='rgb(252, 228, 149)' 
     step={1} 
     maximumValue={5} 
     thumbTintColor='rgb(252, 228, 149)' 
     maximumTrackTintColor='#494A48' 
     minimumTrackTintColor='rgb(252, 228, 149)' />

- Ankush Rishi

Answer 1

您可以将文本的左边缘调整为滑块的值。

const left = this.state.value * (screenWidth-60)/100 - 15;

<Text style={ { width: 50, textAlign: 'center', left: left } }>
  {Math.floor( this.state.value )}
</Text>

<Slider maximumValue={100} 
        value={this.state.value}
        onValueChange={value => this.setState({ value })} />

- Developer

---

谢谢您的回复。如果minimumValue = 3000，maximumValue = 6000，那么const left = ....的计算公式是什么？ - Ansal Antony

Answer 2

您的问题解决方案：

    constructor(props){
        super(props)
        this.state = {
            distance: 30,
            minDistance: 10,
            maxDistance: 100
        }
    }


    render() {
        return (
            <View style={styles.container}>
                <Slider
                    style={{ width: 300}}
                    step={1}
                    minimumValue={this.state.minDistance}
                    maximumValue={this.state.maxDistance}
                    value={this.state.distance}
                    onValueChange={val => this.setState({ distance: val })}
                    thumbTintColor='rgb(252, 228, 149)'
                    maximumTrackTintColor='#d3d3d3' 
                    minimumTrackTintColor='rgb(252, 228, 149)'
                />
                <View style={styles.textCon}>
                    <Text style={styles.colorGrey}>{this.state.minDistance} km</Text>
                    <Text style={styles.colorYellow}>
                        {this.state.distance + 'km'}
                    </Text>
                    <Text style={styles.colorGrey}>{this.state.maxDistance} km</Text>
                </View>
            </View>
        );
    }
}

样式:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#000',
    },
    textCon: {
        width: 320,
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    colorGrey: {
        color: '#d3d3d3'
    },
    colorYellow: {
        color: 'rgb(252, 228, 149)'
    }
});

输出:

工作示例代码: https://snack.expo.io/Syrt3Bs7z

- Ahsan Ali

---

它的功能很棒，但我希望标签也能随着滑块移动。这里的标签固定在中心位置。 - Ankush Rishi

@AnkushRishi，那你为什么接受了那个答案...我正在寻找同样的男孩。 - Bikram Thapa

Answer 3

原生 <Slider /> 没有提供足够的灵活性来自定义您想要的内容。

这个问题可以通过使用react-native-slider解决，它是官方<Slider />的即插即用替代品。

您需要的与其演示样式#4非常相似。

对于您的 Slider 值标签，您可以修改其函数_renderThumbImage()以替换默认的 <Image />。

- Val

Answer 4

import {Slider} from 'react-native-elements';    
<Slider
      thumbStyle={{height: 15, width: 15, backgroundColor: 'orange'}}
      maximumTrackTintColor="grey"
      minimumTrackTintColor="orange"
      thumbProps={{
        children: (
          <View
            style={{
              color: 'green',
              marginTop: -22,
              width: 100,
            }}>
            <Text>Text</Text>
          </View>
        ),
      }}
    />

- Doddanna D

Answer 5

我认为react-native-multi-slider可以解决你的问题。你可以通过将自定义设计的组件发送到可用的customMarker属性来更改滑块拇指。然后，你可以将Multislider包装在另一个组件中，在那里维护状态（用于滑块位置值），并将值作为属性发送到你的自定义设计标记，每当拇指位置发生变化时，可以使用onValuesChange属性检测到。

这个链接也可能对你有帮助。

- Mbs Yaswanth

Answer 6

1. 测量滑块视图的大小和位置

   <Slider
       maximumValue={10}
       onLayout={(event)=>{this.slider_bound(event)}}/>
   
   
   //测量滑块的大小。
   slider_bound=(event)=>{
   var {x, y, width, height} = event.nativeEvent.layout;
   this.state.slider_Width=width;
   this.state.slider_Height=height;
   this.state.slider_x = x;
   this.state.slider_y = y;
   this.state.slider_x_step_size = width/10; //将宽度除以滑块最大值
   
   this.setState({triger:''});
   console.log(TAG+"Slider Dimen:"+width,height+'pos:',x,y);
   
   }
   

2.现在在滑块的"onValueChange"回调中。

   //compute position to show slider value txt
   this.state.value_x = (value * this.state.slider_x_step_size) + this.state.slider_x;
   this.state.value_y = this.state.slider_Height + this.state.slider_y; 

3. 在计算的位置上显示滑块值txt。

<Text style={{position:'absolute',top:this.state.value_y,left:this.state.value_x,color:colors.blackc}}>{this.state.data.slider_value}</Text>

这段代码可以完成任务，但你可能需要稍微调整一下。

- thegoodguy