JSFiddle - React, Tailwind, and code Playground

HTML

<base href="//crossorigin.me/https://elements.polymer-project.org/bower_components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-slider/paper-slider.html"/>
<link rel="import" href="polymer/polymer.html"/>

<dom-module id="my-slider">
    <template>
        <style>
          /* Works */
          paper-slider {
            --paper-slider-active-color: red;
            --paper-slider-knob-color: red;
            --paper-slider-height: 3px;
          }

          /* Doesn't work */
          paper-slider #sliderContainer.paper-slider {
            margin-left: 0;
          }

          /* Also doesn't work */
          .slider-input {
            width: 100px;
          }
        </style>
        
        <div>
            <paper-slider editable$="[[editable]]" disabled$="[[disabled]]" value="{{value}}" min="{{min}}" max="{{max}}"></paper-slider>
        </div>
    </template>

    <script>
        Polymer({
            is: "my-slider",
            properties: {
                value: {
                    type: Number,
                    value: 0,
                    reflectToAttribute: true
                },
                min: {
                    type: Number,
                    value: 0
                },
                max: {
                    type: Number,
                    value: 100
                },
                editable: Boolean,
                disabled: Boolean
            }
        });
    </script>
</dom-module>

<my-slider value="100" editable="true"></my-slider>