UI MarCom 3

Value Slider Stable New in 3.2 Dark Theme

A Value Slider allows users to view and select from a range of value along a slidable bar.


<uimc-value-slider
>
</uimc-value-slider>

AttributeDescriptionValuesDefault
input-fieldAdds text inputs for typing specific values
thumb-iconAdds icon into range thumb.
min-valueSets min-value for slider.Number0
max-valueSets max-value for slider.Number100
valueSets initial start value.Number
second-valueSets second initial end value in case of type: double-sliderNumber
typeType of the slider.progress, progress-double
stepsAdds steps for step-sliderNumber
scaleAdds visual scale according to steps value
labelAdds label on top of sliderString
themeSets theme of the sliderlight, gray, darklight

Default Value Slider

<uimc-value-slider
  max-value="100"
  value="50"
  label="Default"
>
</uimc-value-slider>

With progress indication

<uimc-value-slider
  type="progress"
  max-value="100"
  value="50"
  label="Progress"
>
</uimc-value-slider>

With double handles to select a range

<uimc-value-slider
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="Progress Double"
>
</uimc-value-slider>

With icon handles

<uimc-value-slider
  thumb-icon
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="With an icon in the thumb handle"
>
</uimc-value-slider>

With steps scale

<uimc-value-slider
  scale
  steps="10"
  max-value="100"
  value="50"
  label="Scale"
>
</uimc-value-slider>

With steps scale and double handles

<uimc-value-slider
  scale
  type="progress-double"
  steps="10"
  max-value="100"
  value="10"
  second-value="50"
  label="Progress Double"
>
</uimc-value-slider>

With steps but no visible scale

<uimc-value-slider
  steps="10"
  max-value="100"
  value="50"
  label="Step Slider"
>
</uimc-value-slider>

With number inputs

<uimc-value-slider
  input-field
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="Input Fields"
>
</uimc-value-slider>


Value Slider variants on gray background

Default Value Slider

<uimc-value-slider
  theme="gray"
  max-value="100"
  value="50"
  label="Default"
>
</uimc-value-slider>

With progress indication

<uimc-value-slider
  theme="gray"
  type="progress"
  max-value="100"
  value="50"
  label="Progress"
>
</uimc-value-slider>

With double handles to select a range

<uimc-value-slider
  theme="gray"
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="Progress Double"
>
</uimc-value-slider>

With icon handles

<uimc-value-slider
  theme="gray"
  thumb-icon
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="With an icon in the thumb handle"
>
</uimc-value-slider>

With steps scale

<uimc-value-slider
  theme="gray"
  scale
  steps="10"
  max-value="100"
  value="10"
  label="Scale"
>
</uimc-value-slider>

With steps scale and double handles

<uimc-value-slider
  theme="gray"
  scale
  type="progress-double"
  steps="10"
  max-value="100"
  value="10"
  second-value="50"
  label="Progress Double"
>
</uimc-value-slider>

With steps but no visible scale

<uimc-value-slider
  theme="gray"
  steps="10"
  max-value="100"
  value="10"
  label="Step Slider"
>
</uimc-value-slider>

With number inputs

<uimc-value-slider
  theme="gray"
  input-field
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="Input Fields"
>
</uimc-value-slider>


Value Slider variants on dark background

Default Value Slider

<uimc-value-slider
  theme="dark"
  max-value="100"
  value="50"
  label="Default"
>
</uimc-value-slider>

With progress indication

<uimc-value-slider
  theme="dark"
  type="progress"
  max-value="100"
  value="50"
  label="Progress"
>
</uimc-value-slider>

With double handles to select a range

<uimc-value-slider
  theme="dark"
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="Progress Double"
>
</uimc-value-slider>

With icon handles

<uimc-value-slider
  theme="dark"
  thumb-icon
  type="progress-double"
  max-value="100"
  value="50"
  second-value="50"
  label="With an icon in the thumb handle"
>
</uimc-value-slider>

With steps scale

<uimc-value-slider
  theme="dark"
  scale
  steps="10"
  max-value="100"
  value="50"
  label="Scale"
>
</uimc-value-slider>

With steps scale and double handles

<uimc-value-slider
  theme="dark"
  scale
  type="progress-double"
  steps="10"
  max-value="100"
  value="10"
  second-value="50"
  label="Progress Double"
>
</uimc-value-slider>

With steps but no visible scale

<uimc-value-slider
  theme="dark"
  steps="10"
  max-value="100"
  value="50"
  label="Step Slider"
>
</uimc-value-slider>

With number input

<uimc-value-slider
  theme="dark"
  input-field
  type="progress-double"
  max-value="100"
  value="10"
  second-value="50"
  label="Input Fields"
>
</uimc-value-slider>