Styling 0:25 video

How to change the look and feel of slider with buttons

Learn how to change the look and feel of slider with buttons with SpreadsheetWeb. Follow focused steps, practical examples, and implementation guidance to…

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.
CSS53 lines
.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);
}