Skip to main content

Column config slider

<ColumnConfigSlider
icon={icons.columns}
label='Column configuration'
value={value} // e.g. [1, 12]
onChange={(value) => setData(value)}
/>

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Change number of columns

<ColumnConfigSlider
icon={icons.columns}
label='Column configuration'
value={value}
onChange={(value) => setData(value)}
columns={14}
/>

Mark outer columns as "gutter"

<ColumnConfigSlider
icon={icons.columns}
label='Column configuration'
value={value}
onChange={(value) => setData(value)}
columns={14}
showOuterAsGutter
/>

No offset thumb

<ColumnConfigSlider
icon={icons.columns}
label='Column configuration'
value={value}
onChange={(value) => setData(value)}
disableOffset
/>

No width thumb

<ColumnConfigSlider
icon={icons.columns}
label='Column configuration'
value={value}
onChange={(value) => setData(value)}
disableWidth
/>