Repository: streamlit/streamlit
File: frontend/lib/src/components/widgets/Slider/Slider.tsx (TypeScript)

Code before:
            isDragged={props.$isDragged === true}
            ref={thumbRefs[thumbIndex]}
            aria-valuetext={formattedValue}
            aria-label={currentElement.label}
          >
            <StyledThumbValue
              data-testid="stSliderThumbValue"
              disabled={props.$disabled === true}
              ref={thumbValueRefs[thumbIndex]}
            >
              <StreamlitMarkdown
                source={formattedValue}
                allowHTML={false}
                inheritFont
              />
            </StyledThumbValue>
          </StyledThumb>
        )
      }
    ),
    // Only run this on first render, to avoid losing the focus state.
    // Then, when the value written about the thumb needs to change, that
    // happens with the function below instead.
    []
  )

  useLayoutEffect(() => {
    // Keep aria-valuetext in sync with the formatted values for accessibility.
    thumbRefs.forEach((ref, i) => {
      if (ref.current) {
        ref.current.setAttribute("aria-valuetext", formattedValueArr[i])
      }
    })

    // If, after rendering, the thumb value is outside the container (too
    // far left or too far right), bring it inside. Or if there are two
    // thumbs and their values overlap, fix that.
    const sliderDiv = sliderRef.current ?? null
    const thumb1Div = thumbRefs[0].current
    const thumb2Div = thumbRefs[1]?.current
    const thumb1ValueDiv = thumbValueRefs[0].current
    const thumb2ValueDiv = thumbValueRefs[1]?.current

    fixLabelPositions(
      sliderDiv,
      thumb1Div,
      thumb2Div,
      thumb1ValueDiv,
      thumb2ValueDiv
    )
  })

Review comment (suggestion):
Same as the other comment above
```suggestion
              <StreamlitMarkdown
                source={formattedValue}
                allowHTML={false}
                isLabel
                inheritFont
              />
```

Code after:
        // still reflecting changes to formatting-related props like
        // `element.format`.
        const thumbValues = $value ?? [currentElement.min]
        const thumbValue = thumbValues[thumbIndex] ?? currentElement.min
        const formattedValue = formatValue(thumbValue, currentElement)

        return (
          <StyledThumb
            {...passThrough}
            disabled={props.$disabled === true}
            isDragged={props.$isDragged === true}
            ref={thumbRefs[thumbIndex]}
            aria-valuetext={formattedValue}
            aria-label={currentElement.label}
          >
            <StyledThumbValue
              data-testid="stSliderThumbValue"
              disabled={props.$disabled === true}
              ref={thumbValueRefs[thumbIndex]}
            >
              <StreamlitMarkdown
                source={formattedValue}
                allowHTML={false}
                inheritFont
                isLabel
              />
            </StyledThumbValue>
          </StyledThumb>
        )
      }
    ),
    // Only run this on first render, to avoid losing the focus state.
    // Then, when the value written about the thumb needs to change, that
    // happens with the function below instead.
    []
  )

  useLayoutEffect(() => {
    // Keep aria-valuetext in sync with the formatted values for accessibility.
    thumbRefs.forEach((ref, i) => {
      if (ref.current) {
        ref.current.setAttribute("aria-valuetext", formattedValueArr[i])
      }
    })

    // If, after rendering, the thumb value is outside the container (too
    // far left or too far right), bring it inside. Or if there are two
    // thumbs and their values overlap, fix that.
    const sliderDiv = sliderRef.current ?? null
    const thumb1Div = thumbRefs[0].current
    const thumb2Div = thumbRefs[1]?.current