Repository: nextui-org/nextui
File: packages/components/slider/src/use-slider.ts (TypeScript)

Code before:
      style: {
        ...props.style,
        [isVertical ? "bottom" : direction === "rtl" ? "right" : "left"]: `${startOffset * 100}%`,
        ...(isVertical
          ? {
              height: `${(endOffset - startOffset) * 100}%`,
            }
          : {
              width: `${(endOffset - startOffset) * 100}%`,
            }),
      },
    };
  };

  const getThumbProps = (index: number) => {
    return {
      name,
      index,
      state,
      trackRef,
      orientation,
      isVertical,
      tooltipProps,
      showTooltip,
      renderThumb,
      isFixedValue,
      formatOptions: tooltipValueFormatOptions,
      className: slots.thumb({class: classNames?.thumb}),
    } as SliderThumbProps;
  };

  const getStepProps = (index: number) => {
    const percent = state.getValuePercent(index * step + minValue);

    return {
      className: slots.step({class: classNames?.step}),
      "data-slot": "step",
      "data-in-range": percent <= endOffset && percent >= startOffset,
      style: {
        [isVertical ? "bottom" : direction === "rtl" ? "right" : "left"]: `${percent * 100}%`,
      },
    };
  };

  const getMarkProps = (mark: SliderStepMark) => {
    const percent = state.getValuePercent(mark.value);

    return {
      className: slots.mark({class: classNames?.mark}),
      "data-slot": "mark",
      "data-in-range": percent <= endOffset && percent >= startOffset,

Review comment (suggestion):
This would cause the following warning. I don't think you need to pass `isFixedValue` to thumb at all.

```
Warning: React does not recognize the `isFixedValue` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isfixedvalue` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
```

Code after:
  const getFillerProps: PropGetter = (props = {}) => {
    return {
      "data-slot": "filler",
      className: slots.filler({class: classNames?.filler}),
      ...props,
      style: {
        ...props.style,
        [isVertical ? "bottom" : direction === "rtl" ? "right" : "left"]: `${startOffset * 100}%`,
        ...(isVertical
          ? {
              height: `${(endOffset - startOffset) * 100}%`,
            }
          : {
              width: `${(endOffset - startOffset) * 100}%`,
            }),
      },
    };
  };

  const getThumbProps = (index: number) => {
    return {
      name,
      index,
      state,
      trackRef,
      orientation,
      isVertical,
      tooltipProps,
      showTooltip,
      renderThumb,
      formatOptions: tooltipValueFormatOptions,
      className: slots.thumb({class: classNames?.thumb}),
    } as SliderThumbProps;
  };

  const getStepProps = (index: number) => {
    const percent = state.getValuePercent(index * step + minValue);

    return {
      className: slots.step({class: classNames?.step}),
      "data-slot": "step",
      "data-in-range": percent <= endOffset && percent >= startOffset,
      style: {
        [isVertical ? "bottom" : direction === "rtl" ? "right" : "left"]: `${percent * 100}%`,
      },
    };
  };

  const getMarkProps = (mark: SliderStepMark) => {
    const percent = state.getValuePercent(mark.value);