Textfield Slider

Edit on GitHub

The Textfield Slider is a user interface component for adjusting a number value using a range input. It is paired with a Textfield for direct entry of the value.

Creator

Use the following function to create a Textfield Slider component:

Method fluid.textfieldSlider(container, options);
Description Instantiates the Textfield Slider component. Connects a slider (range input) and textfield, and keeps their values in sync with the model. 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 Slider should be placed.
options
An optional data structure that configures the Textfield Slider component, as described below.
Returns The Textfield Slider component
Examples 

var textfieldSlider = fluid.textfieldSlider(".flc-textfieldSlider", {
    strings: {
        "label": "Textfield Slider"
    },
    model: {
        value: 7,
        step: 1,
        range: {
            min: 0,
            max: 10
        }
    },
    scale: 0
});

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. Primarily this is used by the slider. 1.0
"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 and range input, via the attrs option.
Default Nothing specified by default
Example 

var textfieldSlider = fluid.textfieldSlider(".flc-textfieldSlider", {
    strings: {
        "label": "Text Size"
    }
});

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 both the textfield and Slider subcomponents.
Default Nothing specified by default
Example 

var textfieldSlider = fluid.textfieldSlider(".flc-textfieldSlider", {
    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-textfieldSlider fl-focus"
}
Example 

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

selectors

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

{
    textfield: ".flc-textfieldSlider-field",
    slider: ".flc-textfieldSlider-slider"
}
Example 

var textfieldSlider = fluid.textfieldSlider(".flc-textfieldSlider", {
    selectors: {
        textfield: ".demo-textfieldSlider-field",
        slider: ".demo-textfieldSlider-slider"
    }
});