前書き

そもそも、ここの回答を転記、加工して、動作を確認しただけです。
なぜ書き直したかといいますと、2013年の回答と、現在のバージョンが異なるから、
サンプルページが動作していなかったため、
そして、日本語での参考にできる記事がなかったため、検索性を考えて、転記しておこうということです。

ということなので、話はタイトルで分かったから、早くという人は本家からコピーしたほうが早いです。元のままでもちゃんと動きました。

もしくは、本番へどうぞ。

何がしたいか

jQuery UIのSliderという機能、ハンドル（値を持てる箇所）を複数指定する場合

$('#slider').slider({
    min : 0,
    max : 50,
    values : [0,10,20,30,40,50]
});

こんな感じで、指定してあげると、6つのハンドルができます。

このハンドルを、操作するには、

$('#slider').slider('option',{
    'values' : [5,15,25,35,45,50]
});

こんな感じで、指定すれば、ハンドルを操作することができます。

では、ハンドルの数を変化させたい場合は、

// 増やす？
$('#slider').slider('option',{
    'values' : [0,15,10,20,30,40,50]
});

// 減らす？
$('#slider').slider('option',{
    'values' : [0,10,20,30,40]
});

これだと、動かないです。
エラーは起きないのですが、
valuesは初期化したとき作られた、ハンドルは操作できますが、
後からハンドルの数の変動はできない仕様になっています。

今回は、これを、jQuery UI の拡張という手を使って、sliderにmethodを追加して解決しました。

本番

前書きが長くなりましたが、
では本番です。

環境

Chrome 80.0.3987.132
jQuery 3.3.1
jQuery UI 1.12.1

いずれも、2020/03/05時点で最新版

コード

<!DOCTYPE html>
<html lang="ja-jp">
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css">
    <link rel="stylesheet" type="text/css" href="./css/jquery-ui.structure.min.css">
    <style type="text/css">
        #slider {
            width: 500px;
            margin: 50px
        }
    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="./js/jquery-ui.min.js"></script>
<div id="slider"></div>
<div><button id="add_btn">追加</button><button id="remove_btn">削除</button></div>

    <script type="text/javascript">
// ハンドルの配列
var slider_handles = [0,10,20,30,40,50];
$(function(){
    // jQuery UI slider の拡張
    $.widget('my-namespace.slider', $.ui.slider, {
        addValue: function(val) {
            this.options.values.push(val);
            this._refresh();
        },
        removeValue: function() {
            this.options.values.pop();
            this._refresh();
        }
    });

    // sliderの初期化
    $('#slider').slider({
        min : 0,
        max : 100,
        values : slider_handles
    });

    // ボタンのイベントリスナ
    $('#add_btn').on('click', function(event) {
        // 一番最後にあるハンドルに+10した場所に新しく作る
        $('#slider').slider('addValue',slider_handles[slider_handles.length-1]+10);
    });
    $('#remove_btn').on('click', function(event) {
        // ハンドルを1つ削除
        $('#slider').slider('removeValue');
    });
});
    </script>
</body>
</html>

こんな感じです。上のソースはjQuery UIだけダウンロードしてきて、そのままコピペすれば動くはずです。

簡単に説明

    // jQuery UI slider の拡張
    $.widget('my-namespace.slider', $.ui.slider, {
        addValue: function(val) {
            this.options.values.push(val);
            this._refresh();
        },
        removeValue: function() {
            this.options.values.pop();
            this._refresh();
        }
    });

の部分で、sliderを拡張しています。addValueと、removeValueを追加しています。
大切なのは、this._refresh()だけです。
this._refresh()は、sliderの初期化時に、処理される部分で、一度sliderを破棄してから、作り直しています。

あとは、ボタンのイベントリスナーからそれぞれのメソッドを呼び出します。

// ボタンのイベントリスナー
    $('#add_btn').on('click', function(event) {
        $('#slider').slider('addValue',slider_handles[slider_handles.length-1]+10);
    });
    $('#remove_btn').on('click', function(event) {
       $('#slider').slider('removeValue');
    });

追加する方のイベントリスナーでは、新しいハンドルの場所をしてしなくてはいけないので、
サンプルとしては、とりあえず、今ある一番最後のハンドルの+10の位置に追加しています。

注意書き

元のsliderをオーバーライトして使ってる話

$.widget('my-namespace.slider', $.ui.slider, {});の部分は、
$.ui.sliderを継承して、my-namespace.sliderを新しく作っています。
今回は、そのまま同じ名前の、sliderを使っているので、何も気にせず、拡張されていますが、
この方法を使うと、拡張部分をコピーし忘れてソースコード中からほかのプログラムにコピペすると、動かないので、
$.widget('my-namespace.custom_slider', $.ui.slider, {});のように、
新しい名前を付けて使うのが普通見たいです。ただ、その場合、$(selector).slider();で書いているところをすべて、
$(slector).custom_slider();に書き換えて使ってください。
散々コードを書いてしまった後で、追加するようなときは、今回のようにすると、そのまま使えます。

配列をグローバルに置いている話

ハンドルの値をしまっている配列をグローバルに置いてるのは、今回わかりやすくするために置いただけで、
$('#slider').slider('values');に取得してあげれば、素直に配列で返ってくるので、グローバルを汚したくない人はこちらがいいかも。

ないのに削除したり、もう入らないのに追加できる話

removeでは、配列の中に１つもなくても、実行できています。
addでは、値がはみ出ても追加できています。
実際に使うときはアラート出すなりして、それぞれ工夫してください。

余談

要は`this._refresh()`

this._refresh();だけで動くんだったら、refreshメソッドだけ拡張すればいい気もする。
今回私は、１行ずつの追加削除でよかったけれど、複数行扱うときは、そのほうがいい気がする。

`array.pop()`だけでは不満なら

頭から消したかったり、指定して削除したかったり、することもあるかも、と思った。今のところない。
実装が必要になったら、更新するかもしれない。

本家が実装してくれればいいのに

お願いします。

最後に

サンプルとして投稿しているコードは実際に使ったものを抽象化しているものです。
動作は保証しませんが、問題があれば、教えていただければ修正するかもしれません。

この投稿のコード権利を主張しませんので、適当にコピペして使って大丈夫です。

質問とか、適当こいてんじゃないよみたいなことがあれば、コメントいただければ。

jQuery UI Slider で、ハンドルの数を増減したい話

前書き