Textfield Stepper

Edit on GitHub

The Textfield Stepper is a user interface component for adjusting a number value using a Textfield for direct entry of the value, along buttons for incrementing and decrementing the value. A user can also increment/decrement the values using the up/down arrow keys.

Creator

Use the following function to create a Textfield Stepper component:

Method fluid.textfieldStepper(container, options);
Description Instantiates the Textfield Stepper component. Connects a textfield and a pair of increment/decrement buttons to set a value. Entries are restricted to numbers within a given range.
Parameters
container
A CSS-based selectors, single-element jQuery object, or DOM element that identifies the root DOM node where the Textfield Stepper should be placed.
options
An optional data structure that configures the Textfield Stepper component, as described below.
Returns The Textfield Stepper component
Examples 

var textfieldStepper = fluid.textfieldStepper(".flc-textfieldStepper", {
    strings: {
        "label": "Textfield Stepper"
    },
    model: {
        value: 1,
        step: 0.1,
        range: {
            min: 1,
            max: 2
        }
    },
    scale: 1
});

Methods

increase

Method textfieldStepper.increase();
Description The increase method increases the model value by the model.step amount.
Parameters By default this method does not take any arguments.

decrease

Method textfieldStepper.decrease();
Description The decrease method decreases the model value by the model.step amount.
Parameters By default this method does not take any arguments.

addFocus

Method textfieldStepper.addFocus();
Description The addFocus method adds the focus style classes to the element specified by the focusContainer selector.
Parameters none

removeFocus

Method textfieldStepper.removeFocus();
Description The removeFocus method removes the focus style classes from the element specified by the focusContainer selector.
Parameters none

Model Paths

The following model paths can be used with model listeners.

Model Path Description Default
"value" May be any numerical value provided it is within the range (inclusive). null
"step" The amount to increment/decrement the model value by. 1
"range.min" The minimum the model value can be. 0
"range.max" The maximum the model value can be. 100

Options

strings

Description The strings option allows you to specify strings to be used by the component and is the main location for localization. Amongst other strings, this is used to set an "aria-label" to the textfield element, via the attrs option.
Default 

{
    increaseLabel: "increment",
    decreaseLabel: "decrement"
}
Example 

var textfieldStepper = fluid.textfieldStepper(".flc-textfieldStepper", {
    strings: {
        "label": "Text Size",
        increaseLabel: "increase",
        decreaseLabel: "decrease"
    }
});

attrs

Description The attrs option allows you to specify attributes to be added on creation. In particular this is used to set aria attributes used by the component, such as "aria-labelledby". By default this option is passed along to and applied by the textfield subcomponent.
Default Nothing specified by default
Example 

var textfieldStepper = fluid.textfieldStepper(".flc-textfieldStepper", {
    attrs: {
        "aria-labelledby": "elementID"
    }
});

styles

Description The styles option allows you to specify classes to be added programmatically and used for styling with CSS to the component.
Default 

{
    container: "fl-textfieldStepper",
    focus: "fl-textfieldStepper-focus"
}
Example 

var textfieldStepper = fluid.textfieldStepper(".flc-textfieldStepper", {
    styles: {
        container: "fl-textfieldStepper-container",
        focus: "fl-focus"
    }
});

selectors

Description The selectors option allows you to identify the elements within the component's markup for programmatically interacting with.
Default 

{
    textfield: ".flc-textfieldStepper-field",
    focusContainer: ".flc-textfieldStepper-focusContainer",
    increaseButton: ".flc-textfieldStepper-increase",
    decreaseButton: ".flc-textfieldStepper-decrease"
}
Example 

var textfieldStepper = fluid.textfieldStepper(".flc-textfieldStepper", {
    selectors: {
        textfield: ".demo-textfieldStepper-field",
        focusContainer: ".demo-textfieldStepper-focusContainer",
        increaseButton: ".demo-textfieldStepper-increase",
        decreaseButton: ".demo-textfieldStepper-decrease"
    }
});