jQuery UI滑块 - 三个输入字段 - 最大值问题 [英] jQuery UI slider - three input fields - max value issue

问题描述

嘿！



我一直坚持我目前的项目。我有两个滑块：

- SliderA（可以给出值：50到100）

- SliderB（可以给出值：0到50但是它将数据分成两个输入）



来自这些滑块的数据被收集到三个输入中。部分它正常工作。问题在于SliderB，它的最大值。我想将其最大值基于减法：

100 - 输入1值。



这是代码：

 $（ document ）。ready（ function （）{
 
  var  getmax =  parseInt （$（' ＃value_1'）。val（）， 10 ）; 
 
 $（' ＃sliderA'）。slider（{
 min： 50  ，
 max： 100 ，
更改： function （e，ui）{ 
 $（' ＃value_1'）。val（ui.value）; 
} 
}）; 
 
 $（' ＃sliderB'）。slider（{
 min： 0 ，
 max： 100   -  getmax，
更改： function （e，ui）{
 $（' ＃value_2'）。val（ui.value）; 
 $（' ＃value_3'）。val（ 50   -  ui.value）; 
} 
}）; 
 
 $（' 。field-group'）。keydown（ function （e）{
 e.preventDefault（）; 
  return   false ; 
}）; 
 
 
}）; 

 <   div     id   =  sliderA    class   =  slider < span class =code-keyword>>  <   / div  >  
 <   div     id   =  sliderB    class   =  滑动呃 >  <   / div  >  
 
 <！ -    这些在最终代码中将是type =hidden，这仅适用于演示   - >   
 <  输入   类型  =  text    class   =  field-group value_1    name  < span class =code-keyword> =  value_1    id   =  value_1    value   =  50    /  >  
 <   input    类型  =  text    class   =  field-group value_2    name   =  value_2    id   =  value_2    value   =  0    /  >  
 <  输入   类型  =  text    class   =  field-group value_3   名称  =  value_3    id   =  value_3    value   =  0    /  >  

。 field-group  {
  clear  ：  both;  
  float  ：  none;  
 显示 ：  block;  
 宽度 ：  50％;  
  margin  ：  1em auto;  
} 
 
。 slider  {
  margin  ：  20px ;  
} 

和小提琴： 编辑小提琴 - JSFiddle [ ^ ]



你能帮我吗？接着就，随即？我想要实现的是始终将输入值的总和保持为100.因此，如果在input1中我有值50，那么对于休息，两个输入我有50分割。如果在input1中我有例如70，然后在休息区我们有30个分开。



由用户选择在第2和第3场之间详细分配的内容。



谢谢！

解决方案

（ document ）。ready（ function （）{

var getmax = parseInt （

（' ＃value_1'）。val（）， 10 ）;

（' ＃sliderA'）。slider（{
min： 50 ，
max： 100 ，
更改： function （e，ui） {

hey!

I've stucked with my current project. I have two sliders:
- SliderA (which can give values: 50 to 100)
- SliderB (which can give values: 0 to 50 but it spread data into two inputs)

data from those sliders is collected into three inputs. Partially it works correctly. The issue is with SliderB and it's max value. I want to base its max value on substraction:
100 - Input1 value.

Here is the code:

$(document).ready(function() {

	var getmax = parseInt($('#value_1').val(), 10);

  $('#sliderA').slider({
    min: 50,
    max: 100,
    change: function(e, ui) {
      $('#value_1').val(ui.value);
    }
  });
  
  $('#sliderB').slider({
    min: 0,
    max: 100 - getmax,
    change: function(e, ui) {
      $('#value_2').val(ui.value);
      $('#value_3').val(50 - ui.value);
    }
  });

  $('.field-group').keydown(function(e) {
    e.preventDefault();
    return false;
  });


});

<div id="sliderA" class="slider"></div>
<div id="sliderB" class="slider"></div>

<!-- these would be type="hidden" in final code, this is just for demo -->
<input type="text" class="field-group value_1" name="value_1" id="value_1" value="50" />
<input type="text" class="field-group value_2" name="value_2" id="value_2" value="0" />
<input type="text" class="field-group value_3" name="value_3" id="value_3" value="0" />

.field-group {
  clear: both;
  float: none;
  display: block;
  width: 50%;
  margin: 1em auto;
}

.slider {
  margin: 20px;
}

and the fiddle: Edit fiddle - JSFiddle[^]

can you help me with that? what i want to achieve is always to keep the sum of input values to 100. So if in input1 i have value 50, then for rest two inputs i have 50 to split. if in input1 i have e.g. 70, then in rest fields we have 30 to split.

it's up to the user choice what will be detailed split between field 2nd and 3rd.

thanks!

解决方案

(document).ready(function() { var getmax = parseInt(

('#value_1').val(), 10);

('#sliderA').slider({ min: 50, max: 100, change: function(e, ui) {

这篇关于jQuery UI滑块 - 三个输入字段 - 最大值问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！