Slider field
A numeric input rendered as a draggable slider, good for bounded ranges where exact value matters less than relative position.
The Slider field renders a numeric value as a draggable slider rather than a text input. Use it for bounded ranges where exact precision matters less than relative position, satisfaction ratings, priority weighting, percentage allocations.
Binds to SharePoint's Number column.
Common properties
| Property | Description |
|---|---|
labelstring | Visible label. |
descriptionstring | Helper text. |
requiredboolean default: false | Marks the field required. |
readOnlyboolean default: false | Disables editing. |
Type-specific properties
| Property | Description |
|---|---|
minnumber default: 0 | Smallest selectable value (left end of the track). |
maxnumber default: 100 | Largest selectable value (right end of the track). |
stepnumber default: 1 | Increment between selectable values as the thumb is dragged. |
JavaScript recipes
Read the current value
const score = f365.field('Satisfaction').value as number;
Set a default on load
f365.events.onLoad(() => {
if (f365.field('Priority').value == null) {
f365.field('Priority').value = 50;
}
});
Mirror the value into a label as the user drags
f365.field('Allocation').on('change', (value) => {
const pct = f365.format.number(Number(value) / 100, { style: 'percent' });
f365.field('AllocationLabel').value = pct;
});
Warn at the extremes
f365.events.onChange((e) => {
if (e.fieldKey !== 'RiskWeight') return;
if (Number(e.newValue) >= 90) {
f365.ui.showToast('Risk weight is very high.', 'error');
}
});
Related
Related articles
- Number field
A numeric input with min/max bounds, step increments, optional thousands separators, and percentage formatting.
- Rating field
Star-rating input, typically 1-5 or 1-10 stars. Stored as a number.