Interact.jlでWidgets.rangeslider()の縦方向のスライダーを自然な向きにしたい

Question

JuliaでインタラクティブなUIを実現するInteract.jlパッケージに縦方向で範囲を示すスライダがないか調べていて，次のようなコードを書くと縦向きになることを確認しました。

using Interact, Blink

win = Window();
ui = rangeslider(0:100; value=[30, 80], orientation="vertical");
body!(win, ui)

しかし，表示された画面では次のように上が小さい値，下が大きい値でかなり不自然な感じになってしまいます。

「上が大きい値，下が小さい値」のスライダにするにはどうすればよいでしょうか?

Answer 1

Interact.jlの実装はInteractBase.jlでされているようで，rangesliderの実装部分を確認するとnoUiSliderというライブラリを使っているようです。

そちらのライブラリにはdirectionオプションがあるのですが，どうやらInteractBase.jlの
実装ではそのオプションが使えない状態になっているようです。

using Pkg
Pkg.develop("InteractBase")

を実行すると，$HOME/.julia/dev/InteractBaseにソースがダウンロードされて，ソースを変更するとその変更をお試しで反映できるようになるので，色々調べた内容を反映させて，次のように変更します。

基本的にdirectionのオプションを追加するのみです。
directionは ltrとrtlの値を取ることができ，省略するとltrとみなされるようです。

省略とか面倒なので，jsonにdirectionを追加し，引数が省略されたらltrを設定する
ようにします。orientationもエラーチェックしていないようなので，その流儀に従います。

diff --git a/src/slider.jl b/src/slider.jl
index dbc44c2..778a476 100644
--- a/src/slider.jl
+++ b/src/slider.jl
@@ -82,13 +82,14 @@ Pass a vector to `value` with two values if you want to select a range.
 """
 function rangeslider(theme::WidgetTheme, vals::AbstractUnitRange{<:Integer}, formatted_vals = format.(vals);
     style = Dict(), label = nothing, value = medianelement(vals), orientation = "horizontal", readout = true,
-    className = "is-primary")
+    className = "is-primary", direction = "ltr")
 
     T = Observables.to_value(value) isa Vector ? Vector{eltype(vals)} : eltype(vals)
     value isa AbstractObservable || (value = Observable{T}(value))
 
     index = value
     orientation = string(orientation)
+    direction = string(direction)
     preprocess = T<:Vector ? js"unencoded.map(Math.round)" : js"Math.round(unencoded[0])"
 
     scp = Scope(imports = vcat([nouislider_min_js, nouislider_min_css], libraries(theme)))
@@ -122,6 +123,7 @@ function rangeslider(theme::WidgetTheme, vals::AbstractUnitRange{<:Integer}, for
                 tooltips: $tooltips,
                 connect: $connect,
                 orientation: $orientation,
+                direction: $direction,
                 format: {
                     to: function ( value ) {
                         var ind = Math.round(value-($min));

上の修正をして次のようにdirection="rtl"オプションをつけて実行してみました。

using Interact, Blink

win = Window();
ui = rangeslider(0:100; value=[30, 80], orientation="vertical", direction="rtl");
body!(win, ui)

実行結果は次の画面です。

想定通りの結果になったようです。

プルリクすべきなのかもしれませんが，色々苦手なのでissueでお茶をにごすかもしれません。

2023/03/23追記

InteractBaseのプルリクが受理されました。
InteractBaseのバージョン番号が更新されるとdev InteractBaseの手順は不要でパッケージをアップデートするだけで使えるようになると思います。

2023/07/03追記

回答で提示した修正内容が反映されたInteractBase v0.10.10がリリースされました。
もし，この回答が質問に対する回答となっていないのであれば，ライブラリに修正内容が取り込まれることもないと思うのですが，指摘された方は回答内容がよく理解できていなかったのでしょうか？疑問に残るところです。