如何获得自动计算的输入范围值

时间:2017-08-08 16:34:22

标签: javascript

我想用范围滑块计算输入值;当我调整滑块上的数量时,我得到计算输出,但是如果我手动输入一个值,滑块会改变,但计算不会更新。

var finalvalue = '';
var finalbtprice = '';
var finalbitvalue = '';
finalprice = 3449.31;

var $rangeslider = $('#js-amount-range');
var $amount = $('#js-amount-input');

$rangeslider.on('input', function() {
  var newVal = $amount[0].value = this.value;

  var textval = parseInt(newVal);

  if (textval >= 0 && textval < 1000) {
    finalvalue = 0.16;
    finalbitvalue = textval * finalvalue;
  } else if (textval < 1001 && textval < 3000) {
    finalvalue = 0.14;
    finalbitvalue = textval * finalvalue;
  } else if (textval <= 100000) {
    finalvalue = 0.12;
    finalbitvalue = textval * finalvalue;
  }
  finalbtcvalue = finalbitvalue / finalbtprice;
  if (finalbitvalue) {
    $("#getdolval").html("<strong>" + finalbitvalue.toFixed(2) + "</strong>");
  }
});

$amount.on('input', function() {
  $rangeslider.val(this.value).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="range" id="js-amount-range" value="10" min="10" max="100000">
<input type="number" id="js-amount-input" value="10" min="10" max="100000"></input>


<span id="getdolval">0 $</span>

1 个答案:

答案 0 :(得分:1)

您已在范围内注册import React, { Component } from 'react'; import { View, StyleSheet,FlatList,Button } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <FlatList data={[...Array(5).keys()].map(String)} renderItem={({ item }) => ( <Button title={item} /> )} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#ecf0f1', }, }); 事件处理程序,但是,您已触发input事件。请尝试触发change事件。

input

&#13;
&#13;
 $rangeslider.val(this.value).trigger('input'); //<-- instead of change()
&#13;
$(function() {
  $('[type=range]').on('input', function() {
    console.log('range value', this.value);
  });

  $('[type=text]').on('input', function() {
    $('[type=range]').val(this.value).trigger('input');
  });
});
&#13;
&#13;
&#13;