Search Knowledge Base by Keyword
How to change the look and feel of slider with buttons
To change the look and feel of slider with buttons;
- Open Designer Interface,
- Go to the ‘Stylesheet’ module.
- Add a new stylesheet.
- Choose the slider control stylesheet from ‘Style Template’ to change the look and feel of slider with buttons.
- Save the stylesheet by clicking on the “Save” button.
.slider-with-buttons {
padding: 0;
margin: 0;
background: #fff;
border: 1px solid var(--primaryColor);
border-radius: 4px;
}
.slider-with-buttons .btn:first-child:after {
content: "-";
font-family: Arial;
font-size: 21px;
text-align: center;
margin-left: -4px;
position: absolute;
display: block;
top: 47%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 1;
background-image: none;
}
.slider-with-buttons .btn:nth-child(3):after {
content: "+";
font-family: Arial;
font-size: 21px;
text-align: center;
margin-left: -5px;
position: absolute;
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 1;
background-image: none;
}
.slider-with-buttons .btn span {
font-size: 0;
}
.slider-with-buttons .btn {
border-radius: 0;
}
.slider-with-button-value {
color: var(--colorPrimary);
}