Page 1

Snap to placeholder

Specify a placeholder area, element or container - whatever you want to call it - to insert the component. Think of it as a slot. The component should expand and use all the available width and height of this slot. If it's huge, your slider will be huge. If it's a 20px tall and 200px wide container, then that will be the space being used. 

        .slider-container {
          display: block;
          width: 50%;
          height: 10%;
        }
        
        <div class="slider-container"></div>
        
        
        const slider = new SliderElement()
        document.querySelector('.slider-container').appendChild(slider)

Page 2

Host (root, container) Element basic styling

The outermost layer is the 'host' or 'root'. Think of it as styling the <slider-element> itself. 

          available codes:
          
              host_outer_border_color: 'white',
              host_outer_border_width: 1,
              host_background_color: 'red'

Page 3

The <fill></fill> sub-component or sub-element styles

The 'fill' represents the colored range within the slider. You can think of it as such:

<slider-element>
<fill></fill>
</slider-element>

          available codes:
          
            fill_background_color: 'black',
            fill_inner_border_color: 'red',
            fill_inner_border_width: 1, 
            
          fill {
              background: ${skin.fill_background_color};
              border: ${skin.fill_inner_border_width}px solid ${skin.fill_inner_border_color};
        
            }

Page 4

The <thumb></thumb> sub-component or sub-element styles

Some description 

          available codes:
          
            thumb_background_color: 'transparent',

Page 5

The indicator svg pointer styles

The outermost layer is the 'host' or 'root'. Think of it as styling the <slider-element> itself. 

          available codes:
          
            indicator_color: 'red',
            indicator_width: 3,

Page 6

The tick indicator (to rename) svg style

The outermost layer is the 'host' or 'root'. Think of it as styling the <slider-element> itself. 

          available codes:
          
            indicator_color: 'red',
            indicator_width: 3,

Page 7

The tick indicator (to rename) svg style

The outermost layer is the 'host' or 'root'. Think of it as styling the <slider-element> itself. 

          available codes:
          
            tick_indicator_text_color: 'red',

Page 8

lorem

ipsum 

          available codes: