To create a vertical slider input, I had to find an alternative option since the built-in sliderInput function does not support it. After exploring this thread, I learned that there are two possible solutions: (I) rotating the sliderInput widget using CSS or (II) using a common slider and adding Shiny interaction capabilities. Opting for option (II) was my choice as option (I) did not meet my requirements.
Following the guidelines from this article, I created a custom verticalSlider function:
verticalSlider <- function(inputId, min, max, value) {
tagList(
singleton(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css"))),
singleton(tags$head(tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"))),
singleton(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "css/verticalSlider.css"))),
singleton(tags$head(tags$script(src = "js/verticalSlider.js"))),
tags$input(id = inputId,
class = "verticalSlider",
type = "text",
value = "",
`data-slider-min` = as.character(min),
`data-slider-max` = as.character(max),
`data-slider-step` = as.character(1),
`data-slider-value` = as.character(min),
`data-slider-orientation` = "vertical"
)
)
}
The input binding and slider initialization were done in "js/verticalSlider.js".
$(function() {
$('.verticalSlider').each(function() {
$(this).slider({
reversed : true,
handle : 'square',
change: function(event, ui){}
});
});
});
var verticalSliderBinding = new Shiny.InputBinding();
$.extend(verticalSliderBinding, {
find: function(scope) {
return $(scope).find(".verticalSlider");
},
getValue: function(el) {
return $(el).value;
},
setValue: function(el, val) {
$(el).value = val;
},
subscribe: function(el, callback) {
$(el).on("change.verticalSliderBinding", function(e) {
callback();
});
},
unsubscribe: function(el) {
$(el).off(".verticalSliderBinding");
},
getRatePolicy: function() {
return {
policy: 'debounce',
delay: 150
};
}
});
Shiny.inputBindings.register(verticalSliderBinding, "shiny.verticalSlider");
Although the subscribe function works when moving the slider's knob, it seems that the handle movement has no effect when the slider's value is linked to a textOutput. The reactivity of Shiny does not seem compatible with my custom component. Any guidance on resolving this issue would be greatly appreciated.