Styling Polymer Paper-Slider

Styling Polymer paper-slider

You could use selectors like ::shadow and /deep/ but they are deprecated. If an element doesn't provide the hooks (CSS variables and mixins) then you're basically out of luck.

What you can do, is to create a feature request in the elements GitHub repo to support additional selectors.

Another workaround I already used successfully is to add a style module.

var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'mySharedStyleModuleName');
Polymer.dom(sliderElem.root).appendChild(myDomModule);

I hope the syntax is correct. I use Polymer only with Dart.
The dom-module needs to be a custom-style even though this is normally only necessary when used outside a Polymer element.

See also https://github.com/Polymer/polymer/issues/2681 about issues I run into with this approach.

Styling Google Polymer's paper slider element

:host paper-slider { margin-top: -1px; margin-bottom:-1px; }

The problem is that the sliders are as close to each other as they can be. You can enter negative numbers, but bear in mind that things are going to start looking squished.

Polymer paper-slider behaves strangely when setting min by data binding

Probably the issue is that you are declaring the min property as a String but according to the documentation it should be a number: paper-slider docs.

min: number = 0 notify

Inherited from Polymer.IronRangeBehavior

The number that indicates the minimum value of the range.

Try declaring min as Number:

Polymer({
    is: 'slider-two',
    properties: {
        min: {
            type: Number
        }
    }
});

Polymer, how to adjust padding to internal div on paper-dialog-scrollable

You could use selectors like ::shadow and /deep/ but they are deprecated. If an element doesn't provide the hooks (CSS variables and mixins) then you're basically out of luck and there is non such hook for .scrollable.

What you can do, is to create a feature request in the elements GitHub repo to support additional selectors by mixins.

Another workaround I already used successfully is to add a style module.

Create a style module like

<dom-module id="scrollable-customization">
 <style>
  .scrollable {
    --paper-dialog-scrollable: {
      padding-left: 0px;
      padding-right: 0px;
    };
  </style>
</dom-module>

import it and then "inject" it to the scrollable element

var myDomModule = document.createElement('style', 'custom-style');
myDomModule.setAttribute('include', 'scrollable-customization');
Polymer.dom(this.$pdscroll.root).appendChild(myDomModule);

I hope the syntax is correct. I use Polymer only with Dart.
The dom-module needs to be a custom-style even though this is normally only necessary when used outside a Polymer element.

See also Styling Polymer paper-slider

Polymer: paper-slider gives ripple error

I faced the same issue, and I found a fix. I have answered it into the issue page int github here : https://github.com/PolymerElements/paper-slider/issues/80

---

Related Topics