Reset value ionRangeSlider with Js

user_16047988 0
Viewed 839

I'm trying to reset the slider to initial values when the Reset button is clicked. I have included an html button with the reset function in Js. It works for input and radio fields, but not for sliders.

My reference: http://ionden.com/a/plugins/ion.rangeSlider/start.html Section "using public method".

Also, I don't understand why the slider started to not scroll smoothly. The sliding of the slider is very slow, it seems almost broken.

Sorry, but I'm just a fan and not a pro. So I don't know Js well and don't know how to fix these two problems.

Thanks for the replies.

<!--Range Slider-->
 <div id="rng_mass">
  <input type="text" class="js-range-mass" id="range_mass" name="range_mass" onchange="calc_tdee()" form="tdecalc"/>
 </div> 
   
 <div id="rng_def" hidden>
  <input type="text" class="js-range-def" id="range_def" name="range_def" onchange="calc_tdee()" form="tdecalc"/>
 </div> 

<form action="" id="tdecalc">
</form>

<button id="reset" onclick="resetF()">Reset TDEE</button>

function resetF() {
document.getElementById("tdecalc").reset();  
document.getElementById("range_mass").reset();
document.getElementById("range_def").reset();     
}

Project: https://jsfiddle.net/snake93/zcdq2vx9/20/

css html jquery javascript
2 Answers

If you have a slider defined like this

$ageSlider.ionRangeSlider({
        type: "double",
        min: ageRange.minAge - ageRangeAdjustment,
        max: ageRange.maxAge + ageRangeAdjustment,
        from: ageRange.minAge ,
        to: ageRange.maxAge ,
        grid: true,
        postfix: "",
        onChange: updateAgeInputs,
    });

and if you want to reset it back to default min and max

$ageSlider.data("ionRangeSlider").reset();

enter image description here

user_32683700

According to documentation you need to get instance of ionRangeSlider and then using this instance you can reset value of slider i.e : .reset() . Also, you need to check for null values before doing calculation you can simply use selector || 0 so that it will take selector value or 0.

Demo Code :

$(".js-range-mass").ionRangeSlider({
  skin: "flat",
  type: "single",
  grid: true,
  min: 0,
  max: 100,
  from: 0,
  postfix: "%",
});

$(".js-range-def").ionRangeSlider({
  skin: "flat",
  type: "single",
  grid: true,
  min: 0,
  max: 50,
  from: 0,
  postfix: "%",
});
//get instance of slider
let js_range_mass = $(".js-range-mass").data("ionRangeSlider");
let js_range_def = $(".js-range-def").data("ionRangeSlider");

calc_tdee = function() {
  //not null check..
  var tdee_input = document.getElementById('tdee_value').value || 0;
  var mass_range = document.getElementById('range_mass').value || 0;
  var def_range = document.getElementById('range_def').value || 0;
  var range = document.querySelector('input[name="radios"]:checked');
  if (range) {
    document.getElementById('rng_mass').hidden = range.value !== 'uno';
    document.getElementById('rng_def').hidden = range.value !== 'due';
    document.getElementById('result_mass').hidden = range.value !== 'uno';
    document.getElementById('result_def').hidden = range.value !== 'due';

  }
  var mass_result = (+mass_range / 100 * +tdee_input) + (+tdee_input);
  var tdee = "TDEE " + mass_result.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " Kcal/day";
  document.getElementById('mass').value = tdee

  var def_result = (+tdee_input) - (+def_range / 100 * +tdee_input);
  var tdee = "TDEE " + def_result.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " Kcal/day";
  document.getElementById('def').value = tdee
}

function resetF() {
  //reset it
  js_range_mass.reset();
  js_range_def.reset();
  document.getElementById("tdee_value").value = "";
  document.getElementById('mass').value = "";
  document.getElementById('def').value = "";

}
.button-container {
  display: flex;
}

.massdef-button {
  flex: 1;
}

.massdef-button input[type="radio"] {
  display: none;
}

.massdef-button label {
  display: block;
  background-color: #dedede;
  padding: 10px;
  font-family: roboto;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}

.massdef-button label:hover {
  background: #323744;
  color: #fff;
  transition: 200ms;
}

.massdef-button input[type="radio"]:checked+label {
  background-color: #323744;
  color: #fff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

<!--TDEE Value input-->
<div class="fieldcontainer">
  <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="4" id="tdee_value" name="tdee_value" placeholder="es: 2.200 Kcal" form="tdecalc" required
    autocomplete="off" onchange="calc_tdee()" />
  <label>Inserisci il TDEE</label>
</div>

<!--Radio Button range-->
<div class="button-container">
  <div class="massdef-button">
    <input type="radio" id="hypertrophy" name="radios" value="uno" form="tdecalc" onclick="calc_tdee()">
    <label class="mts-label-radio" for="hypertrophy">Aumento peso / Ipertrofia</label>
  </div>

  <div class="massdef-button">
    <input type="radio" id="cutting" name="radios" value="due" form="tdecalc" onclick="calc_tdee()">
    <label class="mts-label-radio" for="cutting">Riduzione peso / Cutting</label>
  </div>
</div>

<!--Range Slider-->
<div id="rng_mass">
  <input type="text" class="js-range-mass" id="range_mass" name="range_mass" onchange="calc_tdee()" form="tdecalc" />
</div>

<div id="rng_def" hidden>
  <input type="text" class="js-range-def" id="range_def" name="range_def" onchange="calc_tdee()" form="tdecalc" />
</div>

<!--Result fields-->

<div id="result_mass">
  <label class="mts-label">Obiettivo ipertofia</label>
  <input type="text" class="mts-field" id="mass" name="mass_name" placeholder="TDEE 0.000 Kcal/Day" min="1" form="tdecalc" readonly/>
</div>

<div id="result_def" hidden>
  <label class="mts-label">Obiettivo cutting</label>
  <input type="text" class="mts-field" id="def" name="def_name" placeholder="TDEE 0.000 Kcal/Day" min="1" form="tdecalc" readonly/>
</div>

<form action="" id="tdecalc">
</form>

<button id="reset" onclick="resetF()">Reset TDEE</button>

user_106064000
Related