Color Ramp

<sl-color-ramp> | SlColorRamp
Since 1.0 stable

Renders a colour ramp based on a base colour

<sl-color-ramp value="#283D84"></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.