输入两个范围之和的默认答案

Question

所以。。。我试图在圆滑块jQuery插件的帮助下制作一个小计算器。到目前为止，我已经做到了，但我有一些事情想实现，但我无法掌握。

你可以在底部看到现场演示。因此，当你拖动第一个滑块时，就会进行计算。当您切换到"否"并拖动第二个滑块时，将进行另一次计算。

我的问题是：

1. 当你第一次到达网站时，我怎么能有默认值？喜欢第一个滑块的值为80k，最后一个答案将在圆形滑块之后显示。因此，要有一个默认值，然后可以向左或向右拖动滑块。

2. 滑块有一些台阶，比如在0到100k之间，还有10k的台阶。但正如你所看到的，选择0到100k之间的值真的很困难，因为0到1mil之间的滑块长度要小得多。有没有一个解决方案可以更容易地选择0到1mil的值？

3. 当您勾选"否"时，会进行另一次计算，但如果您在滑块2上选择一个值，然后勾选"是"，它仍然会显示两个滑块计算的结果，而不是只显示第一个滑块计算。有什么我能做的吗？当我从"否"变成"是"时，它会反转吗？

4. 最后一个只是纯粹的好奇。正如你所看到的，我设法在数字之间加了逗号，但它们只有在你选择完值时才会出现。如果将拇指向左向右拖动，则显示在右侧的值没有逗号。有解决方案吗？

下面是我的HTML和jQuery代码。我也会在这里发布HTML代码，但jQuery代码就在这里：https://jsfiddle.net/1t9vyy6s/

HTML

<section class="grafic-width">
<div class="grafic-row">
<p class="latime">R&D Spend</p>
<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
<input name="flevel" id="flying1" type="range" min="0" max="5000000" step="10000" value="80000" onchange="add_two_number();">
<label class="right-align">
<p>$</p><output id="slider1out" for="flying1" name="level"></output><p></p>
</label>
</form>
</div>
<div class="grafic-row">
<p class="latime-auto">Was your business profitable?</p>
<div class="form">
<p>Yes</p>
<label class="switch">
<input id="js--checkbox" type="checkbox">
<div class="slider round"></div>
</label>
<p>No</p>
</div>
</div>
<div class="grafic-row" id="slider2">
<p class="latime">Business Losses</p>
<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
<input name="flevel" id="flying2" type="range" min="0" max="5000000" step="10000" value="80000" onchange="add_two_number();">
<p>$</p><output id="slider2out" for="flying2" name="level"></output><p></p>
</form>
</div>
<div class="types">
<div class="overlay"></div>
<div class="container">
<div class="control">
<div id="shape"></div>
</div>
</div>
</div>
</section>

现场：http://alex.the3.ro/jquery.html

Answer 1

因此，对于前两项：

1. 您可能希望使用val();方法设置加载时滑块的值，如下所示：

   $('document').ready(function() {
   $('#flying1').val('80000');
   });
   

2. 在你的插件roundSlider中，使用step，所以添加这个(http://roundsliderui.com/document.html#step)：

   $("#shape").roundSlider({
   sliderType: "min-range",
   editableTooltip: false,
   radius: 105,
   width: 16,
   value: "answer",
   handleSize: 0,
   handleShape: "square",
   circleShape: "half-top",
   startAngle: 0,
   /*detirmines intervals*/
   step: 1000000,
   tooltipFormat: "changeTooltip"
   });