Comparison
<quiet-comparison>
Comparisons display two elements side-by-side with a draggable divider, allowing users to adjust the visible portions for direct visual comparison.
<quiet-comparison> <img slot="start" src="https://images.unsplash.com/photo-1671707696618-ca0685b0012e?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange cat smiles up at the camera"> <img slot="end" src="https://images.unsplash.com/photo-1671707696618-ca0685b0012e?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same orange cat in a grayscale photo"> </quiet-comparison>
Examples Jump to heading
Providing content Jump to heading
Comparisons are commonly used for images, but you can compare just about any content. Use the
start and end slots to place content on each side of the comparison. For best
results, use elements that shares the same dimensions.
Secret Scientists
When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision.Secret Scientists
When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision.<quiet-comparison style="max-width: 380px;"> <quiet-card slot="start" inert class="quiet-light"> <h3 slot="header">Secret Scientists</h3> When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision. <quiet-button slot="footer" variant="primary">Tell me more</quiet-button> <quiet-button slot="footer">I'm skeptical</quiet-button> </quiet-card> <quiet-card slot="end" inert class="quiet-dark"> <h3 slot="header">Secret Scientists</h3> When nobody's watching, cats conduct elaborate scientific experiments to determine if gravity still works by knocking things off shelves with deliberate precision. <quiet-button slot="footer" variant="primary">Tell me more</quiet-button> <quiet-button slot="footer">I'm skeptical</quiet-button> </quiet-card> </quiet-comparison>
To prevent interactions while comparing, add the
inert
attribute to both slotted elements as shown above.
Setting the initial position Jump to heading
Add the disabled attribute to lock the comparison in its current position.
<quiet-comparison position="75"> <img slot="start" src="https://images.unsplash.com/photo-1736593494119-d0a69181b414?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten lays in its bed and cuddles a pillow"> <img slot="end" src="https://images.unsplash.com/photo-1736593494119-d0a69181b414?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same kitten in a grayscale photo"> </quiet-comparison>
Changing the orientation Jump to heading
Set the orientation attribute to vertical to make the comparison vertical.
<quiet-comparison orientation="vertical"> <img slot="start" src="https://images.unsplash.com/photo-1622576041274-ae5dc580175d?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Two kittens nestled up on a blanket"> <img slot="end" src="https://images.unsplash.com/photo-1622576041274-ae5dc580175d?q=80&w=800&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same two kittens in a grayscale photo"> </quiet-comparison>
Using a custom icon Jump to heading
Slot an icon or similar in the handle-icon slot to use a custom icon in the handle.
<quiet-comparison position="66"> <quiet-icon slot="handle-icon" name="arrow-bar-both"></quiet-icon> <img slot="start" src="https://images.unsplash.com/photo-1719310694054-6fc99b7c14ec?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange kitten explores a tall grassy yard"> <img slot="end" src="https://images.unsplash.com/photo-1719310694054-6fc99b7c14ec?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same kitten in a grayscale photo"> </quiet-comparison>
Disabling Jump to heading
Add the disabled attribute to lock the comparison in place. You can still change the position
programmatically when disabled.
<quiet-comparison position="40" disabled> <img slot="start" src="https://images.unsplash.com/photo-1601217156006-3358e1514676?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten peeks out from inside a cardboard box"> <img slot="end" src="https://images.unsplash.com/photo-1601217156006-3358e1514676?q=80&w=1000&sat=-100&bri=-15&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="The same kitten in a grayscale photo"> </quiet-comparison>
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-comparison> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/comparison/comparison.js';
To manually import <quiet-comparison> from npm, use the following code.
import '@quietui/quiet/dist/components/comparison/comparison.js';
Slots Jump to heading
Comparison supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
start
|
The content to show on the left/start side or top side, depending on orientation. |
end
|
The content to show on the right/end side or bottom side, depending on orientation. |
handle-icon
|
A custom icon to use for the divider's handle. |
Properties Jump to heading
Comparison has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
position
|
The position of the divider as a percentage (0-100). |
|
number
|
50
|
orientation
|
The orientation of the comparison slider, either 'horizontal' or 'vertical'. |
|
'horizontal'
|
'horizontal'
|
disabled
|
Disables the comparison component, preventing it from being focused and adjusted. |
|
boolean
|
false
|
Events Jump to heading
Comparison dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events
| Name | Description |
|---|
CSS parts Jump to heading
Comparison exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
start |
The container for the start content. |
::part(start)
|
end |
The container for the end content. |
::part(end)
|
divider |
The draggable divider between start and end. |
::part(divider)
|
handle |
The visual handle within the divider. |
::part(handle)
|
Custom States Jump to heading
Comparison has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
disabled |
Applied when the comparison is disabled. |
:state(disabled)
|
dragging |
Applied when the divider is being dragged. |
:state(dragging)
|
focused |
Applied when the divider has focus. |
:state(focused)
|
Dependencies Jump to heading
Comparison automatically imports the following elements. Sub-dependencies are also included in this list.