How can i make the switch smaller?

[tomerb15]

Hey,
Couldn't quite understand how to use the "small" option from the css.
Thanks!

[EskoCruz]

@tomerb15 - The "small" option in the CSS mentioned in the README.rd under the title Design is if you want to make changed to the white circle toggle. The circle toggle is styled by an element named "small".
<small></small>
I just made a PR #26 where you could state the size as an attribute. You can see it in my forked repository for now.
https://github.com/EskoCruz/angular-ui-switch

[iJungleboy]

would like something like this too - add a class "sm" and it shrinks...

[barnesm999]

You can write your own css to make the switch any shape/size you want.

.switch is the background oval shape. Adjust the height and width here.

.switch small is the front white circle. Make the height and width the same value here to keep a circle shape. Use the same value as you use for the height of .switch

.switch.checked small refers to the front white circle when the switch is enabled. You will need to adjust the left property here depending on your size. Play around with it to get it just right for you.

I think that is all you need to change. These values could probably be set to variables or set in a function using sass if you intend to reuse in different places with different sizes.

[vlio20]

@EskoCruz, can you pls give a full example?

[anjum121]

Hey @vlio20 here you go.

 .switch {
  background: #354052;
  border: 1px solid #394D65;
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  overflow: visible;
  width: 46px;
  height: 25px;
  padding: 0px;
  margin: 0px;
  border-radius: 15px;
  cursor: pointer;
  -webkit-box-shadow: inset 3px 2px 6px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 3px 2px 6px -2px rgba(0,0,0,0.75);
  box-shadow: inset 3px 2px 6px -2px rgba(0,0,0,0.75);
  transition: 0.3s ease-out all;
  -webkit-transition: 0.3s ease-out all;
  top: 0px;
}
/*adding a wide width for larger switch text*/
.switch.wide {
  width:70px;
}
.switch small {
  background: #eeefea;

  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  width: 20px;
  height: 20px;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: 0.3s ease-out all;
  -webkit-transition: 0.3s ease-out all;
}
.switch.checked {
  background: rgb(100, 189, 99);
  border-color: rgb(100, 189, 99);
}
.switch.checked small {
  left: 22px;
}
/*wider switch text moves small further to the right*/
.switch.wide.checked small {
  left:52px;
}
/*styles for switch-text*/
.switch .switch-text {
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
}

.switch .off {
  display:block;
  position: absolute;
  right: 10%;
  top: 25%;
  z-index: 0;
  color:#A9A9A9;
}

.switch .on {
  display:none;
  z-index: 0;
  color:#fff;
  position: absolute;
  top: 25%;
  left: 9%;
}

.switch.checked .off {
  display:none;
}

.switch.checked .on {
  display:block;

}

.switch.disabled {
  opacity: .50;
  cursor: not-allowed;
}

[csbatista]

My solution:

HTML:

<small><switch id="mySwitch" name="mySwitch" ng-change="changeSwitch()" ng-model="mySwitch"></switch></small>

CSS:

.switch {
  width: 35px;
  height: 20px;
  background: #dadada;
}
.switch small {
  border-radius: 100%;
  width: 20px;
  height: 20px;
}
.switch.checked small {
  left: 15px;
}
.switch:focus {
  outline: none;
}