chromium/chrome/browser/resources/ash/settings/internal/storybook/settings_slider_v2_storybook.html

<style include="storybook-styles">
</style>

<h2>With ticks</h2>
<settings-slider-v2
    value="[[sliderValueWithTicks_]]"
    ticks="[[ticks_]]"
    on-change="onTicksSliderChange_"
    disabled="[[disabled_]]"
    aria-label="A11y label"
    aria-description="A11y description">
</settings-slider-v2>
<cr-checkbox checked="{{disabled_}}">Disabled</cr-checkbox>
<code>
  <div>Value: [[sliderValueWithTicks_]]</div>
</code>

<h2>With ticks, hide markers</h2>
<settings-slider-v2
    value="[[sliderValueWithTicks_]]"
    ticks="[[ticks_]]"
    hide-markers
    on-change="onTicksSliderChange_">
</settings-slider-v2>
<code>
  <div>Value: [[sliderValueWithTicks_]]</div>
</code>

<h2>With scale</h2>
<settings-slider-v2
    value="[[sliderValueWithScale_]]"
    scale="10"
    min="0"
    max="10"
    min-label="min"
    max-label="max"
    hide-label="[[hideLabel_]]"
    on-change="onScaleSliderChange_">
</settings-slider-v2>
<cr-checkbox checked="{{hideLabel_}}">Hide labels</cr-checkbox>
<code>
  <div>Value: [[sliderValueWithScale_]]</div>
</code>

<h2>Managed (via pref)</h2>
<settings-slider-v2
    pref="[[virtualManagedPref_]]"
    ticks="[[ticks_]]">
</settings-slider-v2>