JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/[email protected]/dashicons.css">
<div class="customize-control-login-designer-range">

  <label>
  <span class="customize-control-title">Example label</span>

  <div class="login-designer-range">

    <input id="range-123" type="number" class="login-designer-range__number-input" value="3" data-default-value="3" checked="checked" />

    <input type="range" data-input-type="range" class="login-designer-range__track" value="3" data-default-value="3" min="1" max="10" step="1" />

    <a type="button" value="reset" class="login-designer-range__reset"></a>

  </div>

  <p class="customize-control-description">An extra description</p>
  
  </label>

</div>

SCSS

// Transitions.
$range--opacity-speed: 150ms;
$range--opacity-cubic: cubic-bezier(0.694, 0.0482, 0.335, 1);

// Colors.
$white: #fff;
$gray: #555d66;
$blue: #007cba;
$red: #dc3232;
$customizer_blue: #0085ba;
$customizer_blue_bg: rgba(0, 167, 233, 0.075);

$background: #eee;
$border-color: #c2c2c2;

// inherited stuff
.customize-control-login-designer-range {
  padding: 1em;
}

.customize-control-title {
  display: block;
}

// end

.customize-control-login-designer-range {

  .login-designer-range {

    display: flex;
    flex-direction: row;
    justify-content: flex-start;


    &__number-input {
      background: $customizer_blue;
      border: none;
      box-shadow: none !important;
      color: $white;
      appearance: textfield;
      padding: 1em;
      border-radius: .25em;
      text-align: center;
      width: 3em;
    }



    &__track {
      appearance: none;
      margin: 0;
      padding: 0;
      background: $border-color;
      height: 1em;
      border-radius: .5em;
      width: calc(100% - 7em);
      margin: auto;
     // transition: opacity $range--opacity-speed $range--opacity-cubic;

      &:focus {
        outline: none;
      }

      &::-moz-range-thumb,
      &::-webkit-slider-thumb {
				appearance: none;
				background: $customizer_blue;
				border-radius: 50%;
				border: 0;
				box-shadow: none;
				cursor: pointer;
				height: 1.5em;
        width: 1.5em;
        
			}

    }

    &__reset {
      cursor: pointer;
      height: 1em;
      width: 1em;

      &:after {
        content: "\f531";
        cursor: pointer;
        font: 100 1em/1 dashicons;
        display: inline-block;
        
        font: 100 1em/1 sans;
        content: "%";
      }

      &:active {
        transform: scale(0.95);
      }
    }

  }
}

JavaScript

$('.login-designer-range').on('change', 'input[data-input-type="range"]', function() {
  value = $(this).val();
  $(this).prev('.login-designer-range__number-input').val(value);
});

$('.login-designer-range__reset').on('click', function() {
  var
    input = $(this).prev($('input[data-input-type="range"]')),
    defaultValue = input.data('default-value');

  input.val(defaultValue);

  var value = input.val();
  input.prev('.login-designer-range__number-input').val(value);
  input.change();
});