Semantic-UI Checkbox Slider Type
Last Updated :
13 Feb, 2022
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI has a bunch of components for user interface design. One of them is “Checkboxes”. Checkboxes are used to show different options to users to choose from. Users can select among them as per their choice. There are different types of checkboxes based on their shape and style. One of them is slider type.
Semantic UI Checkbox Slider type: The user can display the checkbox in slider shape as per his requirement. It gives a unique look to the website for users to select a value true or false.
Semantic UI checkbox slider class:
- slider: This class is used to set a slider for the user checkbox input.
Syntax:
<div class="ui slider checkbox">
<input type="checkbox">
<label>...</label>
</div>
Example: This example demonstrates the checkbox slider type using the slider class. You can see the checkbox slider moving in the image below. Users can slide it by clicking on it.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Checkbox Slider Type</p>
</b>
<hr>
<br/>
<strong>Slider Checkbox:</strong><br /><br />
<div class="ui slider checkbox">
<input type="checkbox" name="newsletter">
<label>Subscribe to GFG weekly newsletters .</label>
</div>
</div>
</body>
</html>
|
Output:
Slider type checkbox
Reference: https://semantic-ui.com/modules/checkbox.html#slider
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...