Skip to main content

Slider

Slider

The slider component enables users to quickly adjust values (within a set range) by dragging a handle along a track. It is ideally used where the user needs to select the loan amount, tenure (duration of the loan), etc.

In the UI, the slider is represented as a horizontal track with a handle that moves along the track to change the value. As the handle is moved, the current value associated with the slider is determined, which can also be displayed separately.

Slider Properties​

PropertyDescription
MinSets the minimum value for the slider.
MaxSets the maximum value for the slider.
PrefixSets the prefix displayed for the min & max values.
StepSets the intervals between the values from the Min to the Max.
Example 1) Min: 1, Max: 10, Step: 5 - will display 1-5-10 as the slider range.
Example 2) Min: 1, Max: 10, Step: 1 - will display 1-2-3-4-5-6-7-8-9-10 as the slider range.
Show Input
(Checkbox)		Displays the currently selected value.

API Methods​

setReadOnly​

Sets the ReadOnly flag for this component.

setReadOnly(readOnly: boolean): void

setVisibility​

Sets the Visibility flag for this component.

setVisibility(visible: boolean): void

setVisibilityCondition​

Sets the visibility condition for this component.

setVisibilityCondition(condition: string): void

setMax​

Sets the maximum value for the slider.

setMax(max: string): void

setMin​

Sets the minimum value for the slider.

setMin(min: string):void

setStep​

Sets the intervals between the min and max values.

setStep(step: string) :void

setPrefix​

Sets the prefix that will be displayed for the min & max values.

setPrefix(prefix: string): void
usage example

You can use the following code sequence on the "onClick" of a button. This will change the slider's properties on the button click.

onClick
a8forms.Slider("sliderId").setReadOnly(true)
a8forms.Slider("sliderId").setMax("100")
a8forms.Slider("sliderId").setMin("10")
a8forms.Slider("sliderId").setPrefix("$")
a8forms.Slider("sliderId").setStep("5")

Event Handlers​

Event handlers allow you to set triggers for various actions based on the fired events. They are as follows:

onChange​

onChange - Associates with the currently selected "value".

onFormat​

onFormat - Can add extra functions to the values, like currency conversion and such.

async function main(value) {
   setBindParams("input", value)

// Where "input" is the bind name of the field to which the value is pushed.
}

- when the "value" is a number​

...such as the currency, age, etc.

onFormat
function onFormat(value) {
   // Use the Intl.NumberFormat API to format the number
   // Indian currency (INR) with the appropriate currency symbol
   const formatter = new Intl.NumberFormat('en-IN', {
      style: 'currency',
      currency: 'INR',
      minimumFractionDigits: 2,
   });
   return formatter.format(value);
}

Slider

- when the "value" is a string​

...such as a name, dob, etc.

onFormat
// value: object - When the value is derived from a parsed document.
// example value: { "name": string. "dob": "string" }
function onFormat(value) {
    // Use the Intl.NumberFormat API to format the number
    // Indian currency (INR) with the appropriate currency symbol
    const formatter = new Intl.NumberFormat('en-IN', {
       style: 'name',
       currency: 'INR',
       minimumFractionDigits: 2,
    });
    return formatter.format(value);
 }