Range slider

Single-thumb range slider.

Code

Framework

HTML

React

Angular

Default

Toggle dark mode

<certara-slider label="Choose a range" value="50" max="100"></certara-slider>

import { CertaraSlider } from '@certara/certara-ui-react';

<CertaraSlider label="Choose a range" value={50} max={100} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-slider label="Choose a range" value="50" max="100"></certara-slider>

Disabled

Toggle dark mode

<certara-slider label="Choose a range" value="50" max="100" disabled></certara-slider>

import { CertaraSlider } from '@certara/certara-ui-react';

<CertaraSlider label="Choose a range" value={50} max={100} disabled />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-slider label="Choose a range" value="50" max="100" disabled></certara-slider>

Step

Toggle dark mode

<certara-slider label="Confidence" value="72" max="100" step="4"></certara-slider>

import { CertaraSlider } from '@certara/certara-ui-react';

<CertaraSlider label="Confidence" value={72} max={100} step={4} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-slider label="Confidence" value="72" max="100" step="4"></certara-slider>

Form group

Please select a value in multiples of 4

Toggle dark mode

<certara-form-group label="How much confidence in your answer?" show-required group-id="custom-slider">
  <span slot="help">Please select a value in multiples of 4</span>
  <certara-slider aria-labelledby="custom-slider" step="4" value="72" max="100"></certara-slider>
</certara-form-group>

import { CertaraFormGroup, CertaraSlider } from '@certara/certara-ui-react';

<CertaraFormGroup label="How much confidence in your answer?" showRequired groupId="custom-slider">
  <span slot="help">Please select a value in multiples of 4</span>
  <CertaraSlider aria-labelledby="custom-slider" step={4} value={72} max={100} />
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="How much confidence in your answer?" show-required group-id="custom-slider">
  <span slot="help">Please select a value in multiples of 4</span>
  <certara-slider aria-labelledby="custom-slider" step="4" value="72" max="100"></certara-slider>
</certara-form-group>

Dual range

Toggle dark mode

<certara-dual-slider min="0" max="100" lower-value="20" upper-value="80"></certara-dual-slider>

import { CertaraDualSlider } from '@certara/certara-ui-react';

<CertaraDualSlider min={0} max={100} lowerValue={20} upperValue={80} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dual-slider min="0" max="100" lower-value="20" upper-value="80"></certara-dual-slider>

certara-slider

Properties

disabled

Attribute	disabled
Type	boolean
Default	undefined
Required	false
Description	Whether the slider is disabled

label

Attribute	label
Type	string
Default	undefined
Required	false
Description	Accessible label for the slider DEPRECATED. Use <certara-form-group> instead. Will be removed in the next major version.

max

Attribute	max
Type	string
Default	'100'
Required	false
Description	The maximum value of the slider

min

Attribute	min
Type	string
Default	'0'
Required	false
Description	The minimum value of the slider

sliderId

Attribute	slider-id
Type	string
Default	undefined
Required	false
Description	Custom ID for the slider label (used for aria-labelledby relationship)

step

Attribute	step
Type	number
Default	undefined
Required	false
Description	The step value of the slider

value

Attribute	value
Type	number
Default	0
Required	false
Description	The value of the slider

Events

Name	Description	Bubbles
certaraChange	Event emitted when the value changes	true
certaraInput	Event emitted when the input value changes	true

Methods

There are no public methods available for this component

Slots

There are no slots available for this component

certara-dual-slider

Framework

HTML

React

Angular

Range slider with two thumbs and paired number inputs for selecting a min/max span.

Default

Toggle dark mode

<certara-dual-slider min="0" max="100" lower-value="20" upper-value="80"></certara-dual-slider>

import { CertaraDualSlider } from '@certara/certara-ui-react';

<CertaraDualSlider min={0} max={100} lowerValue={20} upperValue={80} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dual-slider min="0" max="100" lower-value="20" upper-value="80"></certara-dual-slider>

Step

Toggle dark mode

<certara-dual-slider step="10"></certara-dual-slider>

import { CertaraDualSlider } from '@certara/certara-ui-react';

<CertaraDualSlider step={10} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dual-slider step="10"></certara-dual-slider>

Disabled

Toggle dark mode

<certara-dual-slider disabled min="0" max="100" lower-value="20" upper-value="80">
</certara-dual-slider>

import { CertaraDualSlider } from '@certara/certara-ui-react';

<CertaraDualSlider disabled min={0} max={100} lowerValue={20} upperValue={80}>
</CertaraDualSlider>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dual-slider disabled min="0" max="100" lower-value="20" upper-value="80">
</certara-dual-slider>

Custom range

Toggle dark mode

<certara-dual-slider min="-7" max="7"></certara-dual-slider>

import { CertaraDualSlider } from '@certara/certara-ui-react';

<CertaraDualSlider min={-7} max={7} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-dual-slider min="-7" max="7"></certara-dual-slider>

Form group

Please select an upper and lower bound

Toggle dark mode

<certara-form-group label="Accepted range" show-required group-id="custom-slider">
  <span slot="help">Please select an upper and lower bound</span>
  <certara-dual-slider min="0" max="100" lower-value="20" upper-value="80"></certara-dual-slider>
</certara-form-group>

import { CertaraDualSlider, CertaraFormGroup } from '@certara/certara-ui-react';

<CertaraFormGroup label="Accepted range" showRequired groupId="custom-slider">
  <span slot="help">Please select an upper and lower bound</span>
  <CertaraDualSlider min={0} max={100} lowerValue={20} upperValue={80} />
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Accepted range" show-required group-id="custom-slider">
  <span slot="help">Please select an upper and lower bound</span>
  <certara-dual-slider min="0" max="100" lower-value="20" upper-value="80"></certara-dual-slider>
</certara-form-group>

Properties

disabled

Attribute	disabled
Type	boolean
Default	undefined
Required	false
Description	Whether the slider is disabled

lowerValue

Attribute	lower-value
Type	number
Default	undefined
Required	false
Description	The value of the lower thumb. Defaults to min. Pushed up with the upper thumb if it is moved past upperValue.

max

Attribute	max
Type	string
Default	'100'
Required	false
Description	The maximum value of the slider

maxValue

Attribute	max-value
Type	number
Default	undefined
Required	false
Description	The value of the upper thumb. Defaults to max. Pushed down with the lower thumb if it is moved below minValue. DEPRECATED. Use upperValue instead. Will be removed in the next major version.

min

Attribute	min
Type	string
Default	'0'
Required	false
Description	The minimum value of the slider

minValue

Attribute	min-value
Type	number
Default	undefined
Required	false
Description	The value of the lower thumb. Defaults to min. Pushed up with the upper thumb if it is moved past maxValue. DEPRECATED. Use lowerValue instead. Will be removed in the next major version.

step

Attribute	step
Type	number
Default	undefined
Required	false
Description	The step value of the slider

upperValue

Attribute	upper-value
Type	number
Default	undefined
Required	false
Description	The value of the upper thumb. Defaults to max. Pushed down with the lower thumb if it is moved below lowerValue.

Events

Name	Description	Bubbles
certaraMaxChange	Event emitted when the upper value changes	true
certaraMinChange	Event emitted when the lower value changes	true

Methods

There are no public methods available for this component

Slots

There are no slots available for this component