feat(surveys): add SliderQuestion survey type

[TJLSmith0831]

Summary

• Adds a new slider survey question type (SurveyQuestionType.Slider) with configurable min, max, step, optional prefix/suffix for value display, and lowerBoundLabel/upperBoundLabel
• Renders full-width with the slider track spanning the card, and a three-column row underneath: left label | live value chip | right label — matching the layout convention of the rating question
• Value updates live on drag (onInput) rather than only on release
• Fixes the vite-surveys playground which was broken (referencing a removed createShadow/style export); rewired to use the current getSurveyStylesheet API and added a Vite plugin to handle the survey.css raw string import

Screenshot

Test plan

• pnpm --filter=posthog-js build passes
• pnpm --filter=posthog-js lint passes
• pnpm --filter=posthog-js test:unit passes
• Playground at packages/browser/playground/vite-surveys renders slider questions correctly
• Slider value updates live while dragging
• Long bound labels wrap without interfering with the slider track or value chip

🤖 Generated with Claude Code

[vercel]

@TJLSmith0831 is attempting to deploy a commit to the PostHog Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
packages/browser/src/extensions/surveys/components/QuestionTypes.tsx:583-593
Default value not snapped to `step` — chip and thumb can show different positions on first render. `Math.round((min + max) / 2)` does not account for the step increment, so e.g. `min=0, max=10, step=3` produces a default of `5` while the browser normalises the thumb to `6`. The chip will display `5`, but if the user submits without touching the slider the recorded response is `5` — a value that is not a valid step position. The same misalignment applies to numeric and string `initialValue` paths.

```suggestion
    const snapToStep = (val: number): number => {
        const steps = Math.round((val - question.min) / question.step)
        return Math.max(question.min, Math.min(question.max, question.min + steps * question.step))
    }

    const [value, setValue] = useState<number>(() => {
        if (isNumber(initialValue)) {
            return snapToStep(Math.max(question.min, Math.min(question.max, initialValue as number)))
        }
        if (isString(initialValue) && !isNaN(Number(initialValue))) {
            const numValue = Number(initialValue)
            return snapToStep(Math.max(question.min, Math.min(question.max, numValue)))
        }
        // Default to middle of range, snapped to nearest step
        return snapToStep((question.min + question.max) / 2)
    })
```

_{Reviews (1): Last reviewed commit: "Merge branch 'main' into feat/slider-sur..." | Re-trigger Greptile}

[marandaneto]

ping @PostHog/team-surveys

[socket-security]

Dependency limit exceeded — report not shown.

This pull request scan exceeded the 10,000-dependency limit applied to this scan, so the results are incomplete and may be inaccurate. To avoid reporting false positives, Socket has not posted a report.

Upgrade your plan to raise the dependency limit and get complete reports, or view the partial scan in the dashboard.

Socket is always free for open source. If this is a non-commercial open source project, contact us to request a free Team account.

[greptile-apps]

_{Reviews (2): Last reviewed commit: "Merge branch 'main' into feat/slider-sur..." | Re-trigger Greptile}

[lucasheriques]

@TJLSmith0831 do you mind adding e2e tests as well as screenshots to the PR?

also, we will need a PR on the main repo too, so users can properly set that up. do you plan on adding it too?

[marandaneto]

made it a draft until we support the frontend/backend bits
#3774 (comment)

[TJLSmith0831]

@lucasheriques Just added the e2e tests and here are the screenshots:

Additionally, the main repo PR is here

e2e tests: added packages/browser/playwright/mocked/surveys/slider-question.spec.ts covering:

• default value is snapped to the middle of the range and submits the chip value as-is
• arrow-key interaction captures the selected value in the survey sent event
• step-aware default snapping (the min=0, max=10, step=3 case the greptile bot flagged) — verifies chip and thumb agree on first render
• prefix/suffix rendering around the value
• a screenshot test that emits the images below into playwright/mocked/surveys/screenshots/

All cases pass on chromium via pnpm playwright:surveys.

Preview / screenshot: I also added a tiny local playground at packages/browser/playground/slider-demo/index.html that uses renderSurveysPreview so it can be opened with any static server (e.g. pnpm playwright-webserver → http://localhost:2345/playground/slider-demo/index.html). The controls let you tweak min/max/step/prefix/suffix/bound labels and the slider re-renders live. Screenshot of the default render:

[github-actions]

This PR hasn't seen activity in a week! Should it be merged, closed, or further worked on? If you want to keep it open, post a comment or remove the stale label – otherwise this will be closed in another week.