Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

position pointer? #136

Open
vance opened this issue Oct 9, 2015 · 2 comments
Open

position pointer? #136

vance opened this issue Oct 9, 2015 · 2 comments

Comments

@vance
Copy link

vance commented Oct 9, 2015

The pointer always has an origin of left/top. I'm trying to move my custom pointer image left (increase size of pointer, too) but the image always hangs too far tot he right. There's no container to move around. not sure how to accomplish this.

In my opinion jslider-pointer should not have the background image, it should be on a child element so it can be positioned better without having to break the pointer element.

@vance
Copy link
Author

vance commented Oct 9, 2015

Ah, I guess I can just remove the background on the jslider-pointer and add a child element right in the template and set the overflow to visible.

    angular.module('angularAwesomeSlider')
        .run(['$templateCache', function ($templateCache) {
            $templateCache.put('ng-slider/slider-bar.tmpl.html',
                '<span ng-class="mainSliderClass" id="{{sliderTmplId}}">' +
                '<table><tr><td>' +
                '<div class="jslider-bg">' +
                '<i class="left"></i>'+
                '<i class="right"></i>'+
                '<i class="range"></i>'+
                '<i class="before"></i>'+
                '<i class="default"></i>'+
                '<i class="default"></i>'+
                '<i class="after"></i>'+
                '</div>' +
                '<div class="jslider-pointer"><div class="handle-image"></div></div>' +
                '<div class="jslider-pointer jslider-pointer-to"></div>' +
                '<div class="jslider-label" ng-show="options.limits"><span ng-bind="limitValue(options.from)"></span>{{options.dimension}}</div>' +
                '<div class="jslider-label jslider-label-to" ng-show="options.limits"><span ng-bind="limitValue(options.to)"></span>{{options.dimension}}</div>' +
                '<div class="jslider-value"><span></span>{{options.dimension}}</div>' +
                '<div class="jslider-value jslider-value-to"><span></span>{{options.dimension}}</div>' +
                '<div class="jslider-scale" id="{{sliderScaleDivTmplId}}"></div>' +
                '</td></tr></table>' +
                '</span>');
        }]);

@darul75
Copy link
Owner

darul75 commented Oct 9, 2015

HI Vance, I have looked at your website, very nice.

Your description is quite clear and maybe I should fix something with that, is it possible for you to put an example by changing this fiddle, it will help me to solve or help you http://jsfiddle.net/darul75/g9e9n8xc/

Did my answer helped you on #135

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants