js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(range): add active track offset

Browse Source
This commit is contained in:
Alessandro
2022-07-06 09:27:37 +00:00
committed by GitHub
parent 96ab3146be
commit 01c7ca27fe
3 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/components/range.md
View File

@@ -133,6 +133,38 @@ const App = () => (
);
```
### Custom Track Offset
You can customize the initial offset of the active track using the `--track-active-offset` custom property.
```html preview
<sl-range
min="-100"
max="100"
style="
--track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100);
--track-active-offset: 50%;
"
></sl-range>
```
```jsx react
import { SlRange } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlRange
min={-100}
max={100}
style={{
'--track-color-active': 'var(--sl-color-primary-600)',
'--track-color-inactive': 'var(--sl-color-primary-200)',
'--track-active-offset': '50%'
}}
/>
);
```
### Custom Tooltip Formatter
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.