material_slider: Create a shinymaterial slider

In shinymaterial: Implement Material Design in Shiny Applications

Description

Build a shinymaterial slider.

Usage

material_slider(
  input_id,
  label,
  min_value,
  max_value,
  step_size = 1,
  initial_value,
  color = NULL
)

Arguments

input_id	String. The input identifier used to access the value.
label	String. The slider label.
min_value	Number. The minimum value on the slider.
max_value	Number. The maximum value on the slider.
step_size	Number. The size of step in the slider.
initial_value	Number. The initial value of the slider.
color	String. The slider color. Leave empty for the default color. Visit https://materializecss.com/color.html for a list of available colors. This input requires using color hex codes, rather than the word form. E.g., "#ef5350", rather than "red lighten-1".

See Also

update_material_slider

Examples

material_slider(
  input_id = "example_slider",
  label = "slider",
  min_value = 5,
  max_value = 15,
  initial_value = 10,
  step_size = 3,
  color = "#ef5350"
)

Example output

<script>$(document).ready(function () {

    var shinyMaterialSlider = new Shiny.InputBinding();

    $.extend(shinyMaterialSlider, {
        find: function (scope) {
            return $(scope).find(".shiny-material-slider");
        },
        getValue: function (el) {
            var classValue = $(el).find(".value").html();
            if (classValue) {
                if (classValue.length === 0) {
                    var inputValue = $(el).find('input').val();
                    return Number(inputValue);
                } else {
                    return Number(classValue);
                }
            } else {
                 var inputValue = $(el).find('input').val();
                 return Number(inputValue);
            }
        },
        subscribe: function (el, callback) {
            $(el).on("change", function (e) {
                callback();
            });
        },
        unsubscribe: function (el) {
            $(el).off(".shiny-material-slider");
        }
    });

    Shiny.inputBindings.register(shinyMaterialSlider);
});</script>
<form action="#">
  <p class="range-field shiny-material-slider" id="example_slider">
    <label for="example_slider">slider</label>
    <input type="range" class="shinymaterial-slider-example_slider" min="5" max="15" step="3" value="10"/>
  </p>
</form>

shinymaterial documentation built on Sept. 1, 2020, 1:07 a.m.