Color Ramp

<sl-color-ramp> | SlColorRamp

Since 2.0

hub24

Renders a colour ramp based on a base colour

<sl-color-ramp value="red"></sl-color-ramp>

Examples

Getting the full colour ramp

Use the ramp method to get the full ramp details

Get ramp

<sl-color-ramp id="ramp" value="red"></sl-color-ramp>

<sl-button id="get-ramp-button">Get ramp</sl-button>

<pre style="font-size: var(--sl-font-size-x-small)" id="ramp-json"></pre>

<script>
  document.querySelector('#get-ramp-button').addEventListener('click', () => {
    document.querySelector('#ramp-json').innerHTML = JSON.stringify(document.querySelector('#ramp').ramp(), null, 4);
  });
</script>

[component-metadata:sl-color-ramp]

Properties

Name	Description	Reflects	Type	Default
`value`	The base value of the colour ramp.		`string`	`''`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.