> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Slider

> Adds a Slider input in the Makeswift builder to visually edit a `number` prop.

Adds a Slider input in the Makeswift builder to visually edit a `number` prop.

![](/_fern-img/71fed66d2b342c416d33de7396d6efe5bae4ad69aad8db86dece38c3000c2674.webp)

## Params

**`label`** `string` — default: Slider

Text for the panel label in the Makeswift builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`defaultValue`** `number`

The value passed to your component when nothing is set in the Makeswift
builder.

---

**`min`** `number`

The smallest number that can be set in the panel slider.

---

**`max`** `number`

The largest number that can be set in the panel slider.

---

**`step`** `number`

The increment amount when dragging the slider or using the input.

---

**`showInput`** `boolean`

When `true`, displays a numeric input field alongside the slider.

---

## Prop type

The Slider control passes a `number` to your component. If you don't set a `defaultValue` and no value is set in the builder, your component receives `undefined`.

## Example

**`Banner.makeswift.ts`**

```tsx Banner.makeswift.ts
import { Slider } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Banner } from "./Banner";

runtime.registerComponent(Banner, {
  type: "banner",
  label: "Banner",
  props: {
    opacity: Slider({
      label: "Opacity",
      defaultValue: 100,
      min: 0,
      max: 100,
      step: 1,
    }),
  },
});
```

**`Banner.tsx`**

```tsx Banner.tsx
interface Props {
  opacity?: number;
}

export function Banner({ opacity = 100 }: Props) {
  return (
    <div style={{ opacity: opacity / 100 }}>
      <p>Welcome to our site</p>
    </div>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).