Javascript 将输入文本连接到滑块

我有一个文本输入框，允许用户输入一个数字。我想在它旁边添加一个滑块控件，这样他们就可以选择使用滑块控件。滑块将允许快速更改，而输入框将允许更精确的输入（特别是在存在具有巨大最小-最大范围的滑块的情况下）

连接这两者的最佳方式是什么？因此，如果用户在输入框中输入一个数字，滑块会自动将其位置移动到该数字所在的位置，反之亦然。如果用户移动滑块，输入框将更新以显示滑块所在的编号

这就是我所拥有的

const [sliderValue, setsliderValue] = useState(15)

 <View style={{ flex: 1, alignItems: 'stretch', justifyContent: 'center' }}>
            <Slider 
                maximumValue={100}
                minimumValue={0}
                step={1}
                value= {sliderValue}
                onValueChange={newsliderValue => setsliderValue(newsliderValue)}  
            />
            <Text>Value:{sliderValue} </Text>
          </View>

          <View style={styles.inputContainer}>
            <TextInput style={styles.inputs}
              placeholder="RFC"
              underlineColorAndroid='transparent'
              onChangeText={newsliderValue => setsliderValue(newsliderValue)}
              value={sliderValue}
              autoCorrect={false}
              autoCapitalize='characters'
            />
          </View>

const[sliderValue，setsliderValue]=useState（15）
setsliderValue（newsliderValue）}
/>
值：{sliderValue}
setsliderValue（newsliderValue）}
值={sliderValue}
自动更正={false}
autoCapitalize='characters'
/>

我在使用react native元素的滑块，我的问题是文本输入会引发下一个错误“不变冲突：iinvariant冲突：无法插入不是数字的输入”

此外，我不能在文本输入中将{sliderValue}作为占位符来显示与滑块相同的数字

---

任何帮助都将不胜感激。

不变冲突是试图将字符串设置为

sliderValue

的结果。您必须使用

newSliderValue=>setSliderValue（parseInt（newSliderValue））

。我相信您可以使用

{sliderValue}

作为占位符。它可能不会显示占位符，因为总是设置值。

不变冲突是试图将字符串设置为

sliderValue

的结果。您必须使用

newSliderValue=>setSliderValue（parseInt（newSliderValue））

。我相信您可以使用

{sliderValue}

作为占位符。它可能不会显示占位符，因为值始终处于设置状态。

您需要将

字符串

值从

文本输入

转换为数字。将

onChangeText

功能更改为：

newsliderValue=>{
如果（！isNaN（parseInt（newsliderValue）））{
setsliderValue（parseInt（newsliderValue））
}
}}

---

仅当值是数字时设置该值。

您需要将

字符串

值从

文本输入

转换为数字。将

onChangeText

功能更改为：

newsliderValue=>{
如果（！isNaN（parseInt（newsliderValue）））{
setsliderValue（parseInt（newsliderValue））
}
}}

---

只有当它是一个数字时才设置值。

两个答案都很有效，我只是遇到了最后一个问题，那就是我列出了一个最大值和最小值。如何防止用户输入高于设置的最大值的值？在onChangeText中，do:

newSliderValue=>（newslidervale这不允许我在textInputsOrry上输入任何数字，它应该是
&&
而不是
|
：
newslidervale=>（newSliderValue这两个答案都很有效，我只是有最后一个问题，我列出了一个最大值和最小值。如何防止用户输入高于设置的最大值的值？在onChangeText中，do:
newSliderValue=>（newslidervale这不允许我在textInputsOrry上输入任何数字，它应该是
&&
而不是
|
：
newslidervale=>（newSliderValue两个答案都很好，我只是有一个最后的问题，那就是我列出了一个最大值和最小值。我如何防止用户输入一个高于最大值的值？如果
newSliderValue
不在范围内，那就不要调用
setsliderValue
。两个答案都很好，我就是st有最后一个问题，即我列出了一个最大值和最小值，如何防止用户输入高于最大值的值？如果
newsliderValue
不在范围内，则不要调用
setsliderValue
。