<TSlider value="25" onChange={(value) => {}} />

export default defineComponent({
  setup() {
    const initial = 30;
    const status = ref<number>(initial);

    const onChange = (v: number) => {
      status.value = v;
    };

    const reset = () => {
      status.value = initial;
    };

    const readable = computed(() => {
      return status.value.toLocaleString();
    });

    return () => (
      <TCell>
        <TSlider step="2.5" min="0" max="50" value={status.value} onChange={onChange} show-ticks />
        <TCard design="outlined" mt="lg" py="sm" px="sm">
          <TFlex align="center" justify="between">
            <TButton color="primary" icon="mdi:refresh" onClick={reset} me>
              Reset
            </TButton>
            <TText size="sm" me>
              {readable.value}
            </TText>
          </TFlex>
        </TCard>
      </TCell>
    );
  },
});

<TSlider
  step="1"
  min="0"
  max="3"
  value="1"
  ticks={{
    0: "Easy",
    1: "Medium",
    2: "Hard",
    3: "Extreme",
  }}
  onChange={(value) => {}}
  show-ticks
/>

<TSlider value="50" color="alert" size="md" />

<TSlider value="50" direction="vertical" color="alert" size="md" />