noUiSliderのステップ設定などについて

Question

nouisliderを使って、範囲指定ができるスライダーを作成しました。
そこで、知りたいことが２つあります。

１　
つまみの位置でテキストが
minとmaxは1,000〜99,999円と指定したいのですが「,」を入れるとエラーになってしまうのですが。カンマは使用できないのでしょうか？

var minVal = 1,000; //最小値
var maxVal = 99,999; //最大値

２
ステップを
1,000円〜30,000円：1,000円単位
30,000円〜：5,000円単位
というふうに途中で単位を上げたいのですが、どのようにすればいいでしょうか？

var $slider = $('#range').get(0); //スライダー要素
var $min = $('#min'); //最小値のテキストフィールド
var $max = $('#max'); //最大値のテキストフィールド
var minVal = 1000; //最小値
var maxVal = 99999; //最大値
var gap = 1000; // 
 
//noUiSliderをセット
noUiSlider.create($slider, {
  start: [ minVal - gap, maxVal + gap ], //
  connect: true,
  step: gap,
  range: {
    'min': minVal - gap, 
    'max': maxVal + gap  
  },

});
 
//noUiSliderイベント
$slider.noUiSlider.on('update', function( values, handle ) {
 
  //現在の最小値・最大値を取得
  var value = Math.floor(values[handle]);
 
  if ( handle ) {
    $max.get(0).value = value; //現在の最大値
  } else {
    $min.get(0).value = value; //現在の最小値
  }
 
  //noUiSlider下部の数値変更
  $('.noUi-value-large').text(minVal);
  $('.noUi-value-large:last-child').text(maxVal);
 
  //最小値以下・最大値以上でinputを空にする
  if ( $min.get(0).value <= minVal || $min.get(0).value > maxVal ){
    $min.val('');
  }
  if ( $max.get(0).value <= minVal || $max.get(0).value > maxVal ){
    $max.val('');
  }
 
});
 
//最小値をinputにセット
$min.get(0).addEventListener('change', function(){
  $slider.noUiSlider.set([this.value, null]);
});
 
//最大値をinputにセット
$max.get(0).addEventListener('change', function(){
  $slider.noUiSlider.set([null, this.value]);
});

Answer 1

1.　,(カンマ)は複数の数値を区切るためのものなので、3桁区切りのためのカンマは使えません。数値を見やすくしたいのであれば、_(アンダーバー)を代わりに使えます。

console.log(1_000_000); //出力: 1000000

2.　公式ドキュメントを見ましょう。range内の各キーに対する値に[開始値, 増分]の配列を指定すれば良いようです。
https://refreshless.com/nouislider/examples/#section-non-linear

追記

minとmaxは1,000〜99,999円

1,000円〜30,000円：1,000円単位
30,000円〜：5,000円単位
この場合は以下のようにします。(startの値はテキトーです)

noUiSlider.create($slider, {
  start: [10000, 50000],
  connect: true,
  range: {
    'min': [1000, 1000],  //最小値は1000, 1000~は1000ずつ増加
    '30%': [30000, 5000], //30000~は5000ずつ増加
    'max': [99999]        //最大値は99999
  },
});

Comments

[yuko_momi]

ありがとうございます！
カンマは使えないんですね。。。

公式ドキュメントを見ましょう。range内の各キーに対する値に[開始値, 増分]の配列を指定すれば良いようです。
＞すみません。。。見てみたのですが、理解ができませんでした。。。

[luuguas]

公式ドキュメントの例ですと、
- 最小値は 0
- 0~500 は連続的に増加
- 500~4000 は500ずつ増加
- 4000~10000 は1000ずつ増加
- 最大値は 10000
という意味です。

[yuko_momi]

どの部分に、どのように記述すればいいのか分からないので、ご教授いただけませんか？

[luuguas]

追記しました。

[yuko_momi]

素晴らしいです！！！
解決しました（＞＜）
丁寧に何度も回答してくださり、本当にありがとうございました！！

[luuguas]

お役に立てたようで何よりです。