material_number_box: Create a shinymaterial number box

In shinymaterial: Implement Material Design in Shiny Applications

Description

Build a shinymaterial number box.

Usage

material_number_box(
  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 number box label.
min_value	Number. The minimum allowable value.
max_value	Number. The maximum allowable value.
step_size	Number. The step size of the arrow clicks.
initial_value	Number. The initial value.
color	String. The accent color of the number box. 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_number_box

Examples

material_number_box(
  input_id = "example_number_box",
  label = "number box",
  min_value = 5,
  max_value = 15,
  initial_value = 10,
  step_size = 2,
  color = "#ef5350"
)

Example output

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

    var shinyMaterialNumberBox = new Shiny.InputBinding();
    $.extend(shinyMaterialNumberBox, {
        find: function (scope) {
            return $(scope).find(".shiny-material-number-box");
        },
        getValue: function (el) {
            return $(el).val();
        },
        subscribe: function (el, callback) {
            $(el).on("change.shiny-material-number-box", function (e) {
                callback();
            });
        },
        unsubscribe: function (el) {
            $(el).off(".shiny-material-number-box");
        }
    });

    Shiny.inputBindings.register(shinyMaterialNumberBox);
});</script>
<div class="input-field" id="example_number_box_number_box">
  <input id="example_number_box" type="number" value="10" min="5" max="15" step="2"/>
  <label for="example_number_box">number box</label>
</div>

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