Support for markdown in select_slider options #12960

jensonjohnathon · 2025-11-06T12:52:38Z

Describe your changes

I altered the slider_select to allow for markdown rendering in the options field.

Now this,

color = st.select_slider( "Select a color of the rainbow", options=[ "*red*", "*orange*", "yellow", "green", "blue", "indigo", "**violet**", ], )

kind of code renders correctly like in the picture.
Not just as *red* but actually as red.

Screenshot or video (only for visual changes)

GitHub Issue Link (if applicable)

#11774

Testing Plan

Explanation of why no additional tests are needed
Unit Tests (JS and/or Python)
E2E Tests
Any manual testing needed?

Further testing would be useful but I am not sure if the issue is still being pursued, as it is older. If yes I can do that and also update the docs.

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

snyk-io · 2025-11-06T12:52:47Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

sfc-gh-bnisco

Thanks for the contribution @jensonjohnathon! Before I do an in-depth code review, I've marked this as requires product approval so we can ensure that we do want to ship this (cc @jrieke ).

With that said, I took a quick look at the code I noticed that this adds a new top-level package.json and yarn.lock file, and takes a net-new dependency on react-markdown. Note that we already have established patterns in our code for rendering Markdown, and we would want to reuse those in this code if we were to move forward with this change.

jensonjohnathon · 2025-11-17T17:28:37Z

Thank you for the feedback I will update my PR this week to incorporate it.

jrieke · 2025-11-17T20:17:03Z

Haven't tested this out in detail but we definitely want this feature and from the screenshot it looks fine, so marking as product approved. Let me know once these bigger issues are fixed and I can try this out again!

frontend/lib/src/components/widgets/Slider/Slider.tsx

jensonjohnathon · 2025-11-18T15:24:47Z

I have exchanged ReactMarkdown for StreamlitMarkdown. So no more files and dependencies that are not needed.

Feel free to test it out.

sfc-gh-bnisco

Thank you for the revisions here!

I've left some inline comments and I ran the CI jobs. There are a number of test failures. The main cases I see are:

Snapshots are failing due to different styling because the font size is different than it was prior. @jrieke , would like to hear your take on expected font behavior given that this is a change to how fonts are rendered here!
Legitimate functionality issues (eg: test_main_script_widgets_persist_across_page_changes is failing because it's expected value is not correct)
Frontend lint errors

As next steps I'd suggest looking into my PR feedback, which may help solve error cases 2 + 3.

sfc-gh-bnisco · 2025-11-18T17:08:06Z

frontend/lib/src/components/widgets/Slider/Slider.tsx

    // 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.
-    []
+    [formattedValueArr]


suggestion: Adding this to the dependency array will likely cause unintended behaviors, let's keep this empty so that the code matches the expected behavior + comment.

The Problem is the way thumbValueRefs updates the value with innerText.

// Update the numbers on the thumb via DOM manipulation to avoid a redraw,
// which drops the widget's focus state.
thumbValueRefs.map((ref, i) => {
if (ref.current) {
ref.current.innerText = formattedValueArr[i]
}
})

With innerText React does not know it has to update how it renders the text. So the thumbValue is just a string again.

So *red* not red again.

To get the correct rendering formattedValueArr has to be passed along, DOM manipulation is not possible in this case as far as I know.

I think the only option is to update the comment before.

frontend/lib/src/components/widgets/Slider/Slider.tsx

jensonjohnathon · 2025-11-19T20:01:09Z

Fixing the linting error:
Warning: 243:6 warning React Hook useEffect has a missing dependency: 'formattedValueArr'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Is not possible while also rendering the selected thumbValue as markdown.

This is because of visual bugs that arise when adding it to the dependency error.

I suggest suppressing it.
with
// eslint-disable-next-line react-hooks/exhaustive-deps

example of the wrong behavior:

Video.Project.mp4

sfc-gh-jrieke · 2025-11-19T20:20:54Z

Just tried this out and works well for the most part! Only weird thing I saw is that for code blocks (e.g. "inline code ```code block``` $\\int_0^1 x^2 dx$"), it seems to weirdly stack them vertically instead of just writing them out horizontally in one line, like st.markdown would do. But maybe that's a bit of an edge case.

jensonjohnathon · 2025-11-19T22:01:16Z

Just tried this out and works well for the most part! Only weird thing I saw is that for code blocks (e.g. "inline code```code block``` $\\int_0^1 x^2 dx$"), it seems to weirdly stack them vertically instead of just writing them out horizontally in one line, like st.markdown would do. But maybe that's a bit of an edge case.

I have tried to fix this but the fix seems non trivial.
The problem is line 48 in the file styled-components.ts

width: theme.sizes.sliderThumb,

This sets the width of the parent div to a standard 0.75em.
I don't quite know how to get around this.

Increasing the width to a bigger value works but breaks a lot of things.

If this is important I can look further into it maybe I can find a way.

jrieke · 2025-11-19T22:28:23Z

Gotcha, yeah I think it's fine, unless one of our engs has a good idea for how to do it!

jensonjohnathon · 2025-11-20T10:28:23Z

I have added the lint error suppression.
The other errors seem to come from my branch being out-of-date. I updated so now I hope everything passes.

...ywright/__snapshots__/linux/iframe_resizer_test/iframe_resizer-embedded_iframe[chromium].png

sfc-gh-nbellante

LGTM 👍

lukasmasuch · 2025-11-24T21:09:10Z

I think it might be good to add st.select_slider to the https://github.com/streamlit/streamlit/blob/develop/e2e_playwright/markdown_features_test.py e2e test as well.

jensonjohnathon · 2025-11-25T13:08:06Z

I think it might be good to add st.select_slider to the https://github.com/streamlit/streamlit/blob/develop/e2e_playwright/markdown_features_test.py e2e test as well.

I would like to get to know the test suite better.

So if you want I can look into this and make a pr but what would be the right process?

Do I just make the PR once I am finished?
Or do I create an issue first?

sfc-gh-bnisco · 2025-11-25T23:31:19Z

Thanks @jensonjohnathon - If you'd like to address this feedback around markdown_features_test.py, please add the changes to this branch directly and we'll take another look at it when you push updates!

jensonjohnathon · 2025-11-26T07:24:53Z

Thanks @jensonjohnathon - If you'd like to address this feedback around markdown_features_test.py, please add the changes to this branch directly and we'll take another look at it when you push updates!

Thanks for the info, I will do exactly that.

label, current_option, and min_label

jensonjohnathon · 2025-11-27T21:21:38Z

I have added the necessary test.
Feel free to check it out.

I think it might be good to add st.select_slider to the https://github.com/streamlit/streamlit/blob/develop/e2e_playwright/markdown_features_test.py e2e test as well.

Copilot

Pull request overview

This PR implements markdown rendering support for st.select_slider options, enabling rich text formatting (bold, italic, icons, colored text, etc.) in slider option labels and tick marks. This addresses issue #11774 by allowing users to enhance the visual presentation of select slider options.

Key Changes

Replaced plain text rendering with StreamlitMarkdown component for slider tick bar labels and thumb values
Refactored renderThumb callback to maintain referential stability while accessing current element data via ref
Updated E2E tests to include comprehensive markdown feature coverage for select_slider
Changed st_select_slider markdown restrictions from DISALLOWED_FEATURES_IN_LABEL to empty list (allowing all markdown features)

Reviewed changes

Copilot reviewed 5 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`frontend/lib/src/components/widgets/Slider/Slider.tsx`	Integrated `StreamlitMarkdown` component for rendering slider option labels and thumb values; refactored `renderThumb` for better performance with `elementRef` pattern; replaced `useEffect` with `useLayoutEffect` for accessibility updates
`e2e_playwright/st_select_slider.py`	Added test case with comprehensive markdown-formatted options (strikethrough, bold, italic, code, icons, colored text, links)
`e2e_playwright/st_select_slider_test.py`	Added snapshot assertion for markdown options rendering across themes and browsers
`e2e_playwright/markdown_features.py`	Updated select_slider to use markdown in both label and options for feature testing
`e2e_playwright/markdown_features_test.py`	Added special case handling for `st_select_slider` to validate markdown rendering in label, current option, and min label positions; removed markdown restrictions for select_slider
`e2e_playwright/__snapshots__/.../st_select_slider-markdown_in_options[...].png`	Visual regression test snapshots for markdown rendering across different themes and browsers
`e2e_playwright/__snapshots__/.../iframe_resizer-embedded_iframe[...].png`	⚠️ Unrelated snapshot files that should not be included in this PR

frontend/lib/src/components/widgets/Slider/Slider.tsx

e2e_playwright/markdown_features_test.py

Copilot · 2025-12-01T17:35:10Z

frontend/lib/src/components/widgets/Slider/Slider.tsx

+  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])
      }
    })


Potential accessibility issue: When slider options contain markdown syntax (e.g., "*italic*" or "**bold**"), the aria-valuetext attribute is set to the raw markdown string rather than the rendered plain text. This means screen readers will announce "asterisk italic asterisk" instead of just "italic".

Consider stripping markdown syntax from the aria-valuetext value for better accessibility. You could use a utility to convert markdown to plain text, or extract the text content from the rendered markdown. For example:

// In useLayoutEffect: const plainTextValue = stripMarkdown(formattedValueArr[i]) // or similar ref.current.setAttribute("aria-valuetext", plainTextValue)

This would ensure screen readers announce the actual content rather than the markdown syntax.

frontend/lib/src/components/widgets/Slider/Slider.tsx

e2e_playwright/markdown_features_test.py

jrieke · 2025-12-10T13:17:58Z

Wohoo, thanks for getting this across the finish line, @jensonjohnathon! 🥳 Would love to send you some swag as a little thank you, just fill out this form and we'll get it on the way: https://forms.gle/RZCUTKCrg7aHyqH78

jensonjohnathon · 2025-12-10T15:30:59Z

Thank you very much!

Will definitely contribute next year too, it was awesome working with you, Bob and Lukas. 🤗

Wohoo, thanks for getting this across the finish line, @jensonjohnathon! 🥳 Would love to send you some swag as a little thank you, just fill out this form and we'll get it on the way: https://forms.gle/RZCUTKCrg7aHyqH78

jensonjohnathon force-pushed the slider_select branch 2 times, most recently from 0675bfc to c2272d6 Compare November 6, 2025 14:00

jensonjohnathon changed the title ~~markdown in options string can be rendered correctly~~ Support for markdown in select_slider options Nov 7, 2025

sfc-gh-bnisco added the status:needs-product-approval PR requires product approval before merging label Nov 17, 2025

sfc-gh-bnisco reviewed Nov 17, 2025

View reviewed changes

sfc-gh-bnisco added feature:st.select_slider Related to the `st.select_slider` widget change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Nov 17, 2025

jrieke added status:product-approved Community PR is approved by product team and removed status:needs-product-approval PR requires product approval before merging labels Nov 17, 2025

options as markdown

c30448b

jensonjohnathon force-pushed the slider_select branch from c2272d6 to c30448b Compare November 18, 2025 10:50

Remove package.json and yarn.lock to revert package installation

14f0876

graphite-app bot reviewed Nov 18, 2025

View reviewed changes

frontend/lib/src/components/widgets/Slider/Slider.tsx Outdated Show resolved Hide resolved

graphite bot suggested change

d6f2e0e

sfc-gh-bnisco self-assigned this Nov 18, 2025

sfc-gh-bnisco reviewed Nov 18, 2025

View reviewed changes

Suggested changes from the code review. + Linting Error Supression

9ac2b47

jensonjohnathon force-pushed the slider_select branch from 2d73f25 to 9ac2b47 Compare November 20, 2025 07:57

Merge branch 'develop' into slider_select

0347f1f

[fix] Attempt to fix visual glitches and match fonts

95e22ca

sfc-gh-bnisco added 3 commits November 24, 2025 10:10

Temporary change in order to get new snapshots for all browsers

c98a0d3

Undo unnecessary change

20c6bbf

Update snapshots

e8cc325

sfc-gh-nbellante reviewed Nov 24, 2025

View reviewed changes

...ywright/__snapshots__/linux/iframe_resizer_test/iframe_resizer-embedded_iframe[chromium].png Show resolved Hide resolved

sfc-gh-nbellante approved these changes Nov 24, 2025

View reviewed changes

Added checks for the slider_select values:

b585ed3

label, current_option, and min_label

sfc-gh-bnisco requested a review from Copilot December 1, 2025 17:29

Copilot started reviewing on behalf of sfc-gh-bnisco December 1, 2025 17:30 View session

Copilot finished reviewing on behalf of sfc-gh-bnisco December 1, 2025 17:34

Copilot AI reviewed Dec 1, 2025

View reviewed changes

lukasmasuch reviewed Dec 1, 2025

View reviewed changes

frontend/lib/src/components/widgets/Slider/Slider.tsx Outdated Show resolved Hide resolved

lukasmasuch reviewed Dec 1, 2025

View reviewed changes

frontend/lib/src/components/widgets/Slider/Slider.tsx Show resolved Hide resolved

sfc-gh-bnisco added 3 commits December 1, 2025 13:03

Utilize isLabel prop

8e1116e

Utilize isLabel prop

b8f4099

Apply test fixes

d8ec652

lukasmasuch reviewed Dec 1, 2025

View reviewed changes

e2e_playwright/markdown_features_test.py Outdated Show resolved Hide resolved

sfc-gh-bnisco added 6 commits December 1, 2025 13:43

Merge branch 'develop' into slider_select

f7c88df

Do not special case select_slider in markdown feature test

65f83b2

Undo unnecessary change

b7f5317

Undo unnecessary change

813a838

Update snapshot

2aa186f

Merge branch 'develop' into slider_select

af1b927

sfc-gh-bnisco merged commit 3c89c5d into streamlit:develop Dec 4, 2025
39 checks passed

Support for markdown in select_slider options #12960

Support for markdown in select_slider options #12960

Uh oh!

Conversation

jensonjohnathon commented Nov 6, 2025

Describe your changes

Screenshot or video (only for visual changes)

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

snyk-io bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

sfc-gh-bnisco left a comment

Choose a reason for hiding this comment

Uh oh!

jensonjohnathon commented Nov 17, 2025

Uh oh!

jrieke commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

jensonjohnathon commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sfc-gh-bnisco left a comment

Choose a reason for hiding this comment

Uh oh!

sfc-gh-bnisco Nov 18, 2025

Choose a reason for hiding this comment

Uh oh!

jensonjohnathon Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jensonjohnathon commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sfc-gh-jrieke commented Nov 19, 2025

Uh oh!

jensonjohnathon commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jrieke commented Nov 19, 2025

Uh oh!

jensonjohnathon commented Nov 20, 2025

Uh oh!

Uh oh!

sfc-gh-nbellante left a comment

Choose a reason for hiding this comment

Uh oh!

lukasmasuch commented Nov 24, 2025

Uh oh!

jensonjohnathon commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sfc-gh-bnisco commented Nov 25, 2025

Uh oh!

jensonjohnathon commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jensonjohnathon commented Nov 27, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

snyk-io bot commented Nov 6, 2025 •

edited

Loading

jrieke commented Nov 17, 2025 •

edited

Loading

jensonjohnathon commented Nov 18, 2025 •

edited

Loading

jensonjohnathon Nov 19, 2025 •

edited

Loading

jensonjohnathon commented Nov 19, 2025 •

edited

Loading

jensonjohnathon commented Nov 19, 2025 •

edited

Loading

jensonjohnathon commented Nov 25, 2025 •

edited

Loading

jensonjohnathon commented Nov 26, 2025 •

edited

Loading

jrieke commented Dec 10, 2025 •

edited

Loading