変数にnoIISliderの最小値/最大値を保存する

Question

boyz min/max値を取得して後で使用できる変数に格納することは可能でしょうか？より具体的には、グローバル変数（？）のmin/max値が必要です。だから私は範囲外でそれを使うことができます。 2番目の問題は、スライダーを更新せずに、私はそれにアクセスする必要があるということです。私は、たとえば、console.logというスライダーの実際の値がスライダーをまったく動かすことなく保持したいと思うということです。 誰も助けることができますか？ 私がここでしたようなもの：https://codepen.io/Hatchling/pen/eRaELE しかし、私は下のスライダーでそれをやりたい

var slider = document.getElementById('slider'); 
 

 
noUiSlider.create(slider, { 
 
\t start: [20, 80], 
 
\t connect: true, 
 
\t range: { 
 
\t \t 'min': 0, 
 
\t \t 'max': 100 
 
\t } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script> 
 

 

 

 
<div id="slider"> 
 

 
</div>

Answer 1

それは最小/最大値を取得し、私は後で使用できる変数にそれらを格納することが可能ですかしら？より具体的には、グローバル変数（？）のmin/max値が必要です。だから私は範囲外でそれを使うことができます。

この質問の解釈方法はわかりません。 「グローバル変数を宣言する方法」を尋ねるなら、これはこのサイトの範囲外です.JavaScriptのスコープ規則を読んでください。

「スライダを作成した後に「範囲」の現在の値にアクセスしたり変更したりする方法」を聞いている場合は、options propertyを読み取りに使用し、updateOptions methodを設定する必要があります。

slider.noUiSlider.optionsプロパティはoptionsオブジェクトへの参照を返すべきだとドキュメントは言いますが、その動作を検証することはできません。これがユースケースである必要がある場合は、noUiSliderの保守担当者に問題または質問を直接提出する必要があります。

var slider = document.getElementById('slider'); 
 

 
noUiSlider.create(slider, { 
 
\t start: [20, 80], 
 
\t connect: true, 
 
\t range: { 
 
\t \t 'min': 0, 
 
\t \t 'max': 100 
 
\t } 
 
}); 
 

 
$("#getOptionsValue").click(function() { 
 
    var sliderOptions = slider.noUiSlider.options; 
 
    console.log("sliderOptions: ", sliderOptions); 
 
}); 
 

 
$("#updateOptionsValue").click(function() { 
 
    slider.noUiSlider.updateOptions({ 
 
    range: { 
 
     min: 10, 
 
     max: 500 
 
    } 
 
    }, false); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script> 
 

 

 

 
<div id="slider"> 
 

 
</div> 
 

 
<button id="getOptionsValue">Get Slider Options (Broken?)</button> 
 
<br/> 
 
<button id="updateOptionsValue">Update Range to 10, 500</button>

第二の問題は、私は、スライダーを更新せず、それへのアクセス権を持っている必要があるということです。私は、たとえば、console.logというスライダーの実際の値がスライダーをまったく動かすことなく保持したいと思うということです。

get methodはそれを満たしていませんか？

var slider = document.getElementById('slider'); 
 

 
noUiSlider.create(slider, { 
 
\t start: [20, 80], 
 
\t connect: true, 
 
\t range: { 
 
\t \t 'min': 0, 
 
\t \t 'max': 100 
 
\t } 
 
}); 
 

 
$("#getSliderValue").click(function() { 
 
    var sliderValue = slider.noUiSlider.get() 
 
    console.log("sliderValue: ", sliderValue); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script> 
 

 

 

 
<div id="slider"> 
 

 
</div> 
 

 
<button id="getSliderValue">Get Slider Value</button>