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

PropertyDescription
label
string
Visible label.
description
string
Helper text.
required
boolean
default: false
Marks the field required.
readOnly
boolean
default: false
Disables editing.

Type-specific properties

PropertyDescription
min
number
default: 0
Smallest selectable value (left end of the track).
max
number
default: 100
Largest selectable value (right end of the track).
step
number
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 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.