JuliaGizmos / InteractBase.jl

Build interactive HTML5 widgets in Julia
Other
27 stars 23 forks source link

When rangeslider(;orientation="vertical"), smaller value is upper #174

Closed ujimushi closed 1 year ago

ujimushi commented 1 year ago

When I was trying Vertical Range Slider, I wrote next code.

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

But, this Range Slider is ... the smaller value is upper, the bigger value is below. It is not the result I expected.

I found the option Direction at NoUiSlider site.

But, it is not selectable with Widgets.rangeslider().

I suggest that direction option is selectable.

When next change,

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));

We'll get the Range Slider the bigger value is upper, smaller value is lower, with direction="rtl" option.

using Interact, Blink
win = Window();
ui = rangeslider(0:100; value=[30, 80], orientation="vertical", direction="rtl");
body!(win, ui)
piever commented 1 year ago

Yes, it makes sense to support the direction keyword. Could you open a PR with this diff (also updating the docstring of rangeslider)?

piever commented 1 year ago

Fixed by #175.