Javascript 显示滑块相对于滑块的值

我想相对于滑块拇指移动标签，如下所示：

现在我的滑块是这样的：

我想显示标签，显示为相对于滑块拇指30公里，这样当滑块移动时，标签应该相应地移动

我使用的是本机React滑块组件

这是我的代码：

<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)' />

内置的

无法提供定制所需内容的灵活性

这应该是可行的，这是官方

的替代品

您需要的与演示风格非常相似#4

---

对于值的滑块标签，您可以修改其功能以替换问题的默认解决方案：

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

输出：

工作片段：

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

<Slider
    maximumValue={10}
    onLayout={(event)=>{this.slider_bound(event)}}/>


//majore size of Slider.
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; //Devide the width by slider maximum value

this.setState({triger:''});
console.log(TAG+"Slider Dimen:"+width,height+'pos:',x,y);

}

显示计算位置上的滑块值txt

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

{this.state.data.slider\u value}

。。。。。。。。。。。。。。

---

这样就可以了，但你可能需要稍微调整一下。你可以根据滑块的值调整文本的左侧

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

const left=this.state.value*（屏幕宽度-60）/100-15；
{Math.floor（this.state.value）}
this.setState（{value}）}/>

我想这会解决你的问题。通过将自定义设计的组件发送到可用的

customMarker

道具，可以更改滑块拇指。然后，您可以将

多滑块

包装到另一个组件中，在其中保持状态（滑块位置值），并在每次拇指位置发生变化时将值作为道具发送到自定义设计的标记上，这可以使用

onValuesChange

道具检测到

---

这也可能对您有所帮助。

它工作得很好，但我希望标签也能作为滑块移动器移动。标签固定在这里center@AnkushRishi那你为什么要接受这个答案…我在找同一个男孩谢谢你的回复。如果minimumValue=3000，maximumValue=6000，那么常数left=的计算方法是什么？

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

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