问:
Error Failed to find 'variables' to Angular 8 which imports fontawesome scss files
I followed these instructions https://fontawesome.com/how-to-use/on-the-web/using-with/sass

I created the project today and it is completely clean.
Here is my folder structure:

```<code>src
|-- app
|   |-- app.component.css
|   |-- app.component.html
|   |-- app.component.spec.ts
|   |-- app.component.ts
|   -- app.module.ts
|-- assets
|   |-- .gitkeep
|   -- css
|       -- normalize.css
|-- environments
|   |-- environment.prod.ts
|   -- environment.ts
|-- favicon.ico
|-- fontawesome
|   |-- _animated.scss
|   |-- _bordered-pulled.scss
|   |-- _core.scss
|   |-- _fixed-width.scss
|   |-- _icons.scss
|   |-- _larger.scss
|   |-- _list.scss
|   |-- _mixins.scss
|   |-- _rotated-flipped.scss
|   |-- _screen-reader.scss
|   |-- _shims.scss
|   |-- _stacked.scss
|   |-- _variables.scss
|   |-- brands.scss
|   |-- fontawesome.scss
|   |-- regular.scss
|   |-- solid.scss
|   -- v4-shims.scss
|-- index.html
|-- main.ts
|-- polyfills.ts
|-- scss
|   -- _variables.scss
|-- styles.css
|-- test.ts
-- webfonts
    |-- fa-brands-400.eot
    |-- fa-brands-400.svg
    |-- fa-brands-400.ttf
    |-- fa-brands-400.woff
    |-- fa-brands-400.woff2
    |-- fa-regular-400.eot
    |-- fa-regular-400.svg
    |-- fa-regular-400.ttf
    |-- fa-regular-400.woff
    |-- fa-regular-400.woff2
    |-- fa-solid-900.eot
    |-- fa-solid-900.svg
    |-- fa-solid-900.ttf
    |-- fa-solid-900.woff
    -- fa-solid-900.woff2
7 directories, 49 files
</code>```

app.component.css:

```<code>@import "../fontawesome/fontawesome.scss";
@import "../fontawesome/solid.scss";
</code>```

But for some reason I see a strange mistake:

```<code>ERROR in ./src/app/app.component.css
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'variables'
  in [
    C:\Projects\music\src\fontawesome
  ]
    at C:\Projects\music\node_modules\postcss-import\lib\resolve-id.js:35:13
    at async Promise.all (index 0)
    at async Promise.all (index 0)
</code>```

I tried changing the name of _variables.scss to variables.css, but this is very stupid and that is not the problem
Help please

答:
Here is the how to. Did you change the webfont path as stated here :

Open your project’s scss/variables.scss and edit the $fa-font-path
  variable to point to where you placed the webfonts folder.

Body:
I followed these instructions https://fontawesome.com/how-to-use/on-the-web/using-with/sass

I created the project today and it is completely clean.
Here is my folder structure:

src
|-- app
|   |-- app.component.css
|   |-- app.component.html
|   |-- app.component.spec.ts
|   |-- app.component.ts
|   -- app.module.ts
|-- assets
|   |-- .gitkeep
|   -- css
|       -- normalize.css
|-- environments
|   |-- environment.prod.ts
|   -- environment.ts
|-- favicon.ico
|-- fontawesome
|   |-- _animated.scss
|   |-- _bordered-pulled.scss
|   |-- _core.scss
|   |-- _fixed-width.scss
|   |-- _icons.scss
|   |-- _larger.scss
|   |-- _list.scss
|   |-- _mixins.scss
|   |-- _rotated-flipped.scss
|   |-- _screen-reader.scss
|   |-- _shims.scss
|   |-- _stacked.scss
|   |-- _variables.scss
|   |-- brands.scss
|   |-- fontawesome.scss
|   |-- regular.scss
|   |-- solid.scss
|   -- v4-shims.scss
|-- index.html
|-- main.ts
|-- polyfills.ts
|-- scss
|   -- _variables.scss
|-- styles.css
|-- test.ts
-- webfonts
    |-- fa-brands-400.eot
    |-- fa-brands-400.svg
    |-- fa-brands-400.ttf
    |-- fa-brands-400.woff
    |-- fa-brands-400.woff2
    |-- fa-regular-400.eot
    |-- fa-regular-400.svg
    |-- fa-regular-400.ttf
    |-- fa-regular-400.woff
    |-- fa-regular-400.woff2
    |-- fa-solid-900.eot
    |-- fa-solid-900.svg
    |-- fa-solid-900.ttf
    |-- fa-solid-900.woff
    -- fa-solid-900.woff2
7 directories, 49 files

app.component.css:

@import "../fontawesome/fontawesome.scss";
@import "../fontawesome/solid.scss";

But for some reason I see a strange mistake:

ERROR in ./src/app/app.component.css
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'variables'
  in [
    C:\Projects\music\src\fontawesome
  ]
    at C:\Projects\music\node_modules\postcss-import\lib\resolve-id.js:35:13
    at async Promise.all (index 0)
    at async Promise.all (index 0)

I tried changing the name of _variables.scss to variables.css, but this is very stupid and that is not the problem
Help please


来源: stackexchange

问:
Xamarin iOS webview underlap behind navigation bar
I am using xamarin custom webview to load my page in app. But facing issue that title of webpage hides behind navigation bar . Or sometimes bottom of page not shown. I have tried adding scrollbar to my layout but still facing issue. Same works perfectly on android. Is it due to custom webview? I just want my webview to start below navigation bar and load completely according to device size.

my custom webview code :

```<code>public class CustomWebView : WebView
    {
        public static readonly BindableProperty UriProperty = BindableProperty.Create(
        propertyName: "Uri",
        returnType: typeof(string),
        declaringType: typeof(CustomWebView),
        defaultValue: default(string));

        public string Uri
        {
            get { return (string)GetValue(UriProperty); }
            set { SetValue(UriProperty, value); }
        }
    }
</code>```

Xaml Page :

```<code><StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
            <StackLayout>
                <Label x:Name="type" Text="Loading..." FontSize="Medium"/>
            </StackLayout>
            <StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <ScrollView Orientation="Vertical" FlowDirection="MatchParent" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Visual="Material" VerticalScrollBarVisibility="Always">
                    <OnPlatform x:TypeArguments="View">
                        <On Platform="Android">
                            <WebView  x:Name="dashboard_android"  HeightRequest="1000" WidthRequest="1000"  />
                        </On>
                        <On Platform="iOS">
                            <local:CustomWebView  x:Name="dashboard_ios" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand"  WidthRequest="1000"  HeightRequest="1000"/>
                        </On>
                    </OnPlatform>
                </ScrollView>

            </StackLayout>
        </StackLayout>
</code>```

code behind :

```<code>dashboard_android.Source = url;
  dashboard_ios.Uri = url;
</code>```

Following are solutions i have tried but no success

Solution 1 :
I have tried adding two properties, but no use

```<code>this.EdgesForExtendedLayout = UIRectEdge.None;

   this.ExtendedLayoutIncludesOpaqueBars = false;
</code>```

Solution 2 :

Tried enabling this unsafe area property , still no success

```<code>ios:Page.UseSafeArea="true"
</code>```

Solution 3 :

Tried setting webview height on content size dynamically , but no success

```<code> public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            // base.DidFinishNavigation(webView, navigation);

            var wv = _webViewRenderer.Element as CustomWebView;
            if (wv != null)
            {
                await System.Threading.Tasks.Task.Delay(100); // wait here till content is rendered
                wv.HeightRequest = (double)webView.Frame.Size.Height; // ScrollView.ContentSize.Height;
            }

        }
</code>```

Updated Xaml Code :

```<code> <StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
 <local:CustomWebView  x:Name="dashboard"  HeightRequest="1000" WidthRequest="1000" />
</StackLayout>
</code>```

Updated Code behind :

```<code>public partial class DashboardView : ContentPage
    {
        string url;
        public DashboardView()
        {
            InitializeComponent();
            url= ""; //adding url to load here
           dashboard.Uri = url;

      }
    }
</code>```

Custom WebView Renderer

```<code>    [assembly: ExportRenderer(typeof(CustomWebView), typeof(MyCustomWebViewRenderer))]
    namespace Report.iOS
    {

        public class MyCustomWebViewRenderer : ViewRenderer<CustomWebView, WKWebView>
        {
            WKWebView webView;
            protected override void OnElementChanged(ElementChangedEventArgs<CustomWebView> e)
            {
                base.OnElementChanged(e);

                if (Control == null)
                {
                    webView = new WKWebView(Frame, new WKWebViewConfiguration());

                    webView.NavigationDelegate = new WebViewDelegate();

                    SetNativeControl(webView);

                }
                if (e.NewElement != null)
                {

                   Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Uri)));

                }
            }

    }

    public  class WebViewDelegate : WKNavigationDelegate, INSUrlConnectionDataDelegate
    {
        string uname = null;
        string pass = null;

        public override async void DidReceiveAuthenticationChallenge(WKWebView webView, NSUrlAuthenticationChallenge challenge, Action<NSUrlSessionAuthChallengeDisposition, NSUrlCredential> completionHandler)
        {
            try
            {
                uname = Xamarin.Forms.Application.Current.Properties.ContainsKey("Username") ? Convert.ToString(Xamarin.Forms.Application.Current.Properties["Username"]) : null;
                pass = await SecureStorage.GetAsync("Password");
            }
            catch (Exception ex)
            {

            }
            completionHandler(NSUrlSessionAuthChallengeDisposition.UseCredential, new NSUrlCredential(uname, pass, NSUrlCredentialPersistence.ForSession));

            return;
        }
    }
}
</code>```

Screenshot of webview screen :

Here i am loading this webpage(https://learn.microsoft.com/en-us/xamarin/essentials/device-display?tabs=android). As you can see half of footer is hidden and i am not able to scroll it.

Screenshot of app

答:
You can use latest WkWebViewRenderer:

```<code>public class MyCustomWebViewRenderer : WkWebViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        //this.LoadUrl("https://learn.microsoft.com/en-us/xamarin/essentials/device-display?tabs=android");

        this.NavigationDelegate = new WebViewDelegate();

    }
}
</code>```

In your code behind, you can directly set the source or set your binding:

```<code>dashboard.Source = "https://learn.microsoft.com/en-us/xamarin/essentials/device-display?tabs=android";
</code>```

Also, start from xamarin.forms 4.5+, xamarin use WKWebview as the default control in iOS and that means you no longer need a custom renderer if you use xamarin.forms 4.5+. Refer:

UIWebView Deprecation and App Store Rejection (ITMS-90809)

ContentLicense: CC BY-SA 4.0

Body:
I am using xamarin custom webview to load my page in app. But facing issue that title of webpage hides behind navigation bar . Or sometimes bottom of page not shown. I have tried adding scrollbar to my layout but still facing issue. Same works perfectly on android. Is it due to custom webview? I just want my webview to start below navigation bar and load completely according to device size.

my custom webview code :

public class CustomWebView : WebView
    {
        public static readonly BindableProperty UriProperty = BindableProperty.Create(
        propertyName: "Uri",
        returnType: typeof(string),
        declaringType: typeof(CustomWebView),
        defaultValue: default(string));

        public string Uri
        {
            get { return (string)GetValue(UriProperty); }
            set { SetValue(UriProperty, value); }
        }
    }

Xaml Page :

<StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand">
            <StackLayout>

            </StackLayout>
            <StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <ScrollView Orientation="Vertical" FlowDirection="MatchParent" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Visual="Material" VerticalScrollBarVisibility="Always">
                    <OnPlatform x:TypeArguments="View">
                        <On Platform="Android">
                            <WebView  x:Name="dashboard_android"  HeightRequest="1000" WidthRequest="1000"  />
                        </On>
                        <On Platform="iOS">
                            <local:CustomWebView  x:Name="dashboard_ios" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand"  WidthRequest="1000"  HeightRequest="1000"/>
                        </On>
                    </OnPlatform>
                </ScrollView>

            </StackLayout>
        </StackLayout>

code behind :

dashboard_android.Source = url;
  dashboard_ios.Uri = url;

Following are solutions i have tried but no success

Solution 1 :
I have tried adding two properties, but no use

this.EdgesForExtendedLayout = UIRectEdge.None;

   this.ExtendedLayoutIncludesOpaqueBars = false;

Solution 2 :

Tried enabling this unsafe area property , still no success

ios:Page.UseSafeArea="true"

Solution 3 :

Tried setting webview height on content size dynamically , but no success

 public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            // base.DidFinishNavigation(webView, navigation);

            var wv = _webViewRenderer.Element as CustomWebView;
            if (wv != null)
            {
                await System.Threading.Tasks.Task.Delay(100); // wait here till content is rendered
                wv.HeightRequest = (double)webView.Frame.Size.Height; // ScrollView.ContentSize.Height;
            }

        }

Updated Xaml Code :

 <StackLayout  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
 <local:CustomWebView  x:Name="dashboard"  HeightRequest="1000" WidthRequest="1000" />
</StackLayout>

Updated Code behind :

public partial class DashboardView : ContentPage
    {
        string url;
        public DashboardView()
        {
            InitializeComponent();
            url= ""; //adding url to load here
           dashboard.Uri = url;

      }
    }

Custom WebView Renderer

    [assembly: ExportRenderer(typeof(CustomWebView), typeof(MyCustomWebViewRenderer))]
    namespace Report.iOS
    {

        public class MyCustomWebViewRenderer : ViewRenderer<CustomWebView, WKWebView>
        {
            WKWebView webView;
            protected override void OnElementChanged(ElementChangedEventArgs<CustomWebView> e)
            {
                base.OnElementChanged(e);

                if (Control == null)
                {
                    webView = new WKWebView(Frame, new WKWebViewConfiguration());

                    webView.NavigationDelegate = new WebViewDelegate();

                    SetNativeControl(webView);

                }
                if (e.NewElement != null)
                {

                   Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Uri)));

                }
            }

    }

    public  class WebViewDelegate : WKNavigationDelegate, INSUrlConnectionDataDelegate
    {
        string uname = null;
        string pass = null;

        public override async void DidReceiveAuthenticationChallenge(WKWebView webView, NSUrlAuthenticationChallenge challenge, Action<NSUrlSessionAuthChallengeDisposition, NSUrlCredential> completionHandler)
        {
            try
            {
                uname = Xamarin.Forms.Application.Current.Properties.ContainsKey("Username") ? Convert.ToString(Xamarin.Forms.Application.Current.Properties["Username"]) : null;
                pass = await SecureStorage.GetAsync("Password");
            }
            catch (Exception ex)
            {

            }
            completionHandler(NSUrlSessionAuthChallengeDisposition.UseCredential, new NSUrlCredential(uname, pass, NSUrlCredentialPersistence.ForSession));

            return;
        }
    }
}

Screenshot of webview screen :

Here i am loading this webpage(https://learn.microsoft.com/en-us/xamarin/essentials/device-display?tabs=android). As you can see half of footer is hidden and i am not able to scroll it.

Screenshot of app

Body:
You can use latest WkWebViewRenderer:

public class MyCustomWebViewRenderer : WkWebViewRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        //this.LoadUrl("https://learn.microsoft.com/en-us/xamarin/essentials/device-display?tabs=android");

        this.NavigationDelegate = new WebViewDelegate();

    }
}

In your code behind, you can directly set the source or set your binding:

dashboard.Source = "https://learn.microsoft.com/en-us/xamarin/essentials/device-display?tabs=android";

Also, start from xamarin.forms 4.5+, xamarin use WKWebview as the default control in iOS and that means you no longer need a custom renderer if you use xamarin.forms 4.5+. Refer:

UIWebView Deprecation and App Store Rejection (ITMS-90809)


问:
How do I fix this error on unity: Cannot implicitly convert type float to UnityEngine.transform
I am trying to do something, and I get this error:

```<code>Cannot implicitly convert type float to UnityEngine.transform
</code>```

code:

```<code>private Transform EndPos;
EndPos = transform.position.x + 40f;
transform.position = Vector3.MoveTowards(transform.position, EndPos, moveSpeed * Time.deltaTime);
</code>```

Thank you for your help

答:
Instead of doing "EndPos = transform.position.x + 40f;"
Change the "X" of EndPos (EndPos.position.x) and then use it.</p>

Body:
I am trying to do something, and I get this error:

Cannot implicitly convert type float to UnityEngine.transform

code:

private Transform EndPos;
EndPos = transform.position.x + 40f;
transform.position = Vector3.MoveTowards(transform.position, EndPos, moveSpeed * Time.deltaTime);

Thank you for your help


问:
Resolution problem in C# .NET Winform application
I have developed my winform application without caring about the resolution. Now am stuck up on PCs with a lower resolution. What to do now? Is there any way of conversion? I mean can the application get the resolution of the PC on which it is running, and set itself accordingly? Is there not any code or variable of Resolution in Windows which can be used ?</p>

答: You can get the resolution using VirtualScreen.Size.

ContentLicense: CC BY-SA 3.0


问:
Override AccessTokenExpireTimeSpan
Is possible to override the default AccessTokenExpireTimeSpan for a specific ticket on a custom OAuthAuthorizationServerProvider? The default expiration time for all other tickets is 15 minutes.

```<code>public public override Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
    ...
    var ticket = new AuthenticationTicket(identity, properties);

    if (condition)
    {
        ticket.Properties.IssuedUtc = DateTime.UtcNow;
        ticket.Properties.ExpiresUtc = DateTime.UtcNow.AddDays(14);
    }

    context.Validated(ticket);
}
</code>```

The generated token with condition == true has the default expiration time (15 minutes). I would like to not change the context.Options.AccessTokenExpireTimeSpan because it affects all tokens and that's not the idea.

答:
```<code>public override Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
// Note: a= how much time u want
    Startup.OAuthOptions.AccessTokenExpireTimeSpan = TimeSpan.FromSeconds(a);
}
</code>```

also have many different option like:

FromDays,FromHours,FromMilliseconds,FromMinutes

Title: Override AccessTokenExpireTimeSpan

Body:
Is possible to override the default AccessTokenExpireTimeSpan for a specific ticket on a custom OAuthAuthorizationServerProvider? The default expiration time for all other tickets is 15 minutes.

public public override Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
    ...
    var ticket = new AuthenticationTicket(identity, properties);

    if (condition)
    {
        ticket.Properties.IssuedUtc = DateTime.UtcNow;
        ticket.Properties.ExpiresUtc = DateTime.UtcNow.AddDays(14);
    }

    context.Validated(ticket);
}

The generated token with condition == true has the default expiration time (15 minutes). I would like to not change the context.Options.AccessTokenExpireTimeSpan because it affects all tokens and that's not the idea.

Body:
public override Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
// Note: a= how much time u want
    Startup.OAuthOptions.AccessTokenExpireTimeSpan = TimeSpan.FromSeconds(a);
}

also have many different option like:

FromDays,FromHours,FromMilliseconds,FromMinutes


问:
Use undefined variables in Selenium IDE for if condition
I want to run a "child" test at the end of a "parent" test that clears the session cookie if the flag skipReset has not been set. Further, I'd like to run a "grandparent" test that calls the "parent" test and sets skipReset = true which should make the "child" test skip the reset and thus keep the session data (see print screen).

However if the "child" test was run from a parent which did not set the flag skipReset the test fails.

I'd like to do this so the "parent" test does not have to be copy pasted into the "grand parent" test excluding the session reset line. Is there a way to achieve this?

答:
I set such variables in '1' to know should 'child' function run or not. If variable is undifined or '0', 'child' function will not run.</p>

```<code>store | 1 | flag    or    store | 0 | flag

if | ${flag} == 1|
code here...
end| |
</code>```

Body:
I set such variables in '1' to know should 'child' function run or not. If variable is undifined or '0', 'child' function will not run.

store | 1 | flag    or    store | 0 | flag

if | ${flag} == 1|
code here...
end| |


问:
VS code, writing extension that plots a graph
Frustrated that there is no extension to do something I want I am writing my own. One of the key features I need is to be able to display graphs within vs code itself (graph refers to both a curve and nodes-edges).

In order to accomplish this I learnt about webviews, but that seems overkill. All I need is some very basic draw functionalities (straight line, bezier curve, circle, text).

The minimum I need to be able to do is:

I have code that generates a list of values over time. All the extension needs to do is read the generated txt file and plot the evolution of the values over time. Ideally this happens in the sidebar.

Any tips?

答:
Webviews are the way to go. You can do things like this with them:

See also my antlr4-vscode extension repo


问:
What are some efficient ways to de-dupe a set of > 1 million strings?
For my project, I need to de-dupe very large sets of strings very efficiently. I.e., given a list of strings that may contain duplicates, I want to produce a list of all the strings in that list, but without any duplicates.

Here's the simplified pseudocode:

```<code>set = # empty set
deduped = []
for string in strings:
    if !set.contains(string):
        set.add(string)
        deduped.add(string)
</code>```

Here's the simplified C++ for it (roughly):

```<code>std::unordered_set <const char *>set;
for (auto &string : strings) {
  // do some non-trivial work here that is difficult to parallelize
  auto result = set.try_emplace(string);
}
// afterwards, iterate over set and dump strings into vector
</code>```

However, this is not fast enough for my needs (I've benchmarked it carefully). Here are some ideas to make it faster:

Use a different C++ set implementation (e.g., abseil's)

Insert into the set concurrently (however, per the comment in the C++ implementation, this is hard. Also, there will be performance overhead to parallelizing)

Because the set of strings changes very little across runs, perhaps cache whether or not the hash function generates no collisions. If it doesn't generate any (while accounting for the changes), then strings can be compared by their hash during lookup, rather than for actual string equality (strcmp).

Storing the de-duped strings in a file across runs (however, although that may seem simple, there are lots of complexities here)

All of these solutions, I've found, are either prohibitively tricky or don't provide that big of a speedup. Any ideas for fast de-duping? Ideally, something that doesn't require parallelization or file caching.

答:
You can try various algorithms and data structures to solve your problem:

Try using a prefix tree (trie), a suffix machine, a hash table. A hash table is one of the fastest ways to find duplicates. Try different hash tables.

Use various data attributes to reduce unnecessary calculations. For example, you can only process subsets of strings with the same length.

Try to implement the "divide and conquer" approach to parallelize the computations. For example, divide the set of strings by the number of subsets equal to the hardware threads. Then combine these subsets into one. Since the subsets will be reduced in size in the process (if the number of duplicates is large enough), combining these subsets should not be too expensive.

Unfortunately, there is no general approach to this problem. To a large extent, the decision depends on the nature of the data being processed. The second item on my list seems to me the most promising. Always try to reduce the computations to work with a smaller data set.

Body:
For my project, I need to de-dupe very large sets of strings very efficiently. I.e., given a list of strings that may contain duplicates, I want to produce a list of all the strings in that list, but without any duplicates.

Here's the simplified pseudocode:

set = # empty set
deduped = []
for string in strings:
    if !set.contains(string):
        set.add(string)
        deduped.add(string)

Here's the simplified C++ for it (roughly):

std::unordered_set <const char *>set;
for (auto &string : strings) {
  // do some non-trivial work here that is difficult to parallelize
  auto result = set.try_emplace(string);
}
// afterwards, iterate over set and dump strings into vector

However, this is not fast enough for my needs (I've benchmarked it carefully). Here are some ideas to make it faster:

Use a different C++ set implementation (e.g., abseil's)

Insert into the set concurrently (however, per the comment in the C++ implementation, this is hard. Also, there will be performance overhead to parallelizing)

Because the set of strings changes very little across runs, perhaps cache whether or not the hash function generates no collisions. If it doesn't generate any (while accounting for the changes), then strings can be compared by their hash during lookup, rather than for actual string equality (strcmp).

Storing the de-duped strings in a file across runs (however, although that may seem simple, there are lots of complexities here)

All of these solutions, I've found, are either prohibitively tricky or don't provide that big of a speedup. Any ideas for fast de-duping? Ideally, something that doesn't require parallelization or file caching.


问:
Trying to understand Firebase Authentication one account per email address and trusted providers
When one account per email address is enabled for Firebase Authentication in a Firebase project there seems to be some additional rules that apply to the authentication process. The different providers seem to be split into two categories, trusted and untrusted providers. If at any point a user signs in through a trusted provider all untrusted providers the user has signed in with before are removed from the account. Additionally a user will never be allowed to sign in with an untrusted provider ever again. Whether a provider is trusted or untrusted seems depend on whether a new account created with a provider validates that account exclusively through sending a verification email to the address the new account was created with.

I cannot seem to find a comprehensive list as to which providers are trusted and untrusted. Through implementing the solutions into my app I have found the following:

TRUSTED PROVIDERS:

Apple

Google

Microsoft (If the email the account was created with is
a @outlook.com or @hotmail.com)

UNTRUSTED PROVIDERS:

Facebook

Microsoft (If the email the account was created with is not a @outlook.com or @hotmail.com)

Is this understanding correct? Where can I find a breakdown of the rest of the providers? My app is built in Unity so I would be limited only to the providers Firebase supports in Unity. Why is Microsoft both a trusted and untrusted provider in different circumstances? I could really use some help here.

My app is for iOS and Android. I wanted to exclusively use Apple and Google sign in but Apple sign in is unavailable to users on iOS < 13. These iOS devices seem to represent about a 6th of all devices in western nations. I tried to implement Google and Microsoft sign in to get good coverage of these users but then I ran into the complication with Microsoft sign in being both trusted and untrusted. I don't want to over complicate my app with manual account merging, but I don't know what other providers are wholly trusted. What is the best solution here to keep things simple stupid?

答:
Trusted providers:

Google (provided it was issued by Google, eg. @gmail.com)

Yahoo (provided it was issued by Yahoo, eg. @yahoo.com)

Microsoft (provided it was issued by Microsoft, eg. @outlook.com)

Apple (always verified. Apple's selling point is that accounts are verified and multi-factor authenticated).

Email link authentication.

Untrusted providers use emails that were not issued by the provider:

Facebook

Twitter

GitHub

Google, Yahoo, Microsoft, etc provided they were not issued by that IdP.

Email / Password without email verification

Firebase Auth plays it safe and does not consider certain providers verified, because in some cases, email is verified once but is not continuously verified (in some cases, IdPs allow you to change the email after verification without requiring re-verification).

The best way to explain the sensitivity of an unverified account is the following:
1. Attacker signs up with unverified provider (password) using email victim@example.com which they do not own
2. Email owner signs up with victim@example.com using verified provider Google.

If the account is not reset and the password unlinked, then the attacker maintains access to that account which they do not own. To solve this issue, the user has to verify the email (by sending email verification) before step 2. By doing so, sign in with Google will automatically merge accounts and keep the password.

This is why in some cases, you will get an error:

Sign up with unverified provider using email user@example.com

sign in with another unverified provider of the same email

Error thrown requiring linking after verifying ownership of first account.

User expected to sign in to account from step 1.

User can now link credential of account from step 2.

Here is a summary of the behavior in various cases:

existing unverified provider, sign in with another unverified provider of same email -> error requiring linking thrown. (eg. Facebook followed by GitHub)

existing verified provider, sign in with another unverified provider of same email -> error requiring linking thrown. (eg. Google followed by Facebook)

existing unverified provider, sign in with verified provider of same email -> verified provider overwrites unverified provider. (eg. Facebook followed by Google)

existing verified provider, sign in with another verified provider of same email -> Both providers linked without any error. (eg. Apple followed by Google)

If you do not agree with Firebase Auth and want to consider Facebook as a verified provider, you can always set the email as verified after Facebook sign-in by using the Admin SDK.

Hopefully this helps clarify this behavior.


问:
Should I use Kotlin data class as JPA entity?
I am developing with Kotlin and JPA recently.
I use Kotlin data class as JPA @Entity class.

But now, There comes some problem with relation

```<code>@ManyToOne(fetch = FetchType.LAZY, optional = true)
</code>```

The lazy fetching doesn't work with data class.

I have learned that Kotlin data class is default to be 'final' so that Hibernate can't generate proxy for them.

I wonder is this a mistake to use Kotlin data class as JPA @Entity class or there is other ways to make the lazy fetching work properly with data class.

答:
That's right: Kotlin Data classes are immutable by default, but that shouldn't stop you from using lazy fetch.

In order to make lazy fetching working as expected, entities should be open. You can use a plugin called Kotlin allopen for that purpose:

```<code>plugins {
  ...
  kotlin("plugin.allopen") version "1.3.61"
}

allOpen {
  annotation("javax.persistence.Entity")
  annotation("javax.persistence.Embeddable")
  annotation("javax.persistence.MappedSuperclass")
}
</code>```

https://plugins.gradle.org/plugin/org.jetbrains.kotlin.plugin.allopen

Body:
I am developing with Kotlin and JPA recently.
I use Kotlin data class as JPA @Entity class.

But now, There comes some problem with relation

@ManyToOne(fetch = FetchType.LAZY, optional = true)

The lazy fetching doesn't work with data class.

I have learned that Kotlin data class is default to be 'final' so that Hibernate can't generate proxy for them.

I wonder is this a mistake to use Kotlin data class as JPA @Entity class or there is other ways to make the lazy fetching work properly with data class.

Body:
That's right: Kotlin Data classes are immutable by default, but that shouldn't stop you from using lazy fetch.

In order to make lazy fetching working as expected, entities should be open. You can use a plugin called Kotlin allopen for that purpose:

plugins {
  ...
  kotlin("plugin.allopen") version "1.3.61"
}

allOpen {
  annotation("javax.persistence.Entity")
  annotation("javax.persistence.Embeddable")
  annotation("javax.persistence.MappedSuperclass")
}

https://plugins.gradle.org/plugin/org.jetbrains.kotlin.plugin.allopen


问:
Call to undefined method stdClass::count() in laravel
I trying to paginate my JSON response but got error like this

Call to undefined method stdClass::count()

My JSON response from the Laravel API by using guzzle ......

here is my controller code

public function index()
{
    $response =  $this->client->get('getUserIndex')->getBody();
    $content = json_decode($response->getContents());
    $total = $content->count();
    $paginationRecord = CollectionPaginate::paginate($content, $total, '15');
    return view('configuration.comuserprofiles.ComUserProfilesList', ['paginationRecord' => $paginationRecord->data]);
}
```

答:
$content is an object, not a collection or array you can use php method count with array get $total  </p>

<p>Please Change to </p>

```<code> public function index()
        {

            $response =  $this->client->get('getUserIndex')->getBody();
            $content = json_decode($response->getContents(),true );
            $total = count($content);
            $paginationRecord = CollectionPaginate::paginate($content, $total, '15');
            return view('configuration.comuserprofiles.ComUserProfilesList', ['paginationRecord' => $paginationRecord->data]);

}
</code>```

Body:
$content is an object, not a collection or array you can use php method count with array get $total

Please Change to

 public function index()
        {

            $response =  $this->client->get('getUserIndex')->getBody();
            $content = json_decode($response->getContents(),true );
            $total = count($content);
            $paginationRecord = CollectionPaginate::paginate($content, $total, '15');
            return view('configuration.comuserprofiles.ComUserProfilesList', ['paginationRecord' => $paginationRecord->data]);

}


问:
What Is JXTitledPanel in Java NetBeans
What is the JXTitledPanel? What it is an older version of JPanel? Or what?
I use the NetBeans IDE version 8, but I don't see the JXTitledPanel in the palette.
Please explanation.</p>

答:
JXTitledPanel comes with the swingx package, which is a 3rd party library project created / maintained by Swinglab that extend the swing components.

to be able to use it, I believe that you have to install the 3rd party library, but as of now I think its already been dead for some times.

I've never been using this myself, but a little of googling helped with this conclusion.

Title: What Is JXTitledPanel in Java NetBeans


问:
VSTO AddIn VB.net UserControl
Coding in VB.net

Custom Usercontrol + Interop - AddIn with Excel

I have been trying to replicate a refedit box for several forms.

(RefEdit: Control to select ranges as in inputbox)

i would use inputbox but is not practical sin just in one form im attemting to use around 15.

I successfuly added the custom control to the form and i tried the behavior of buttons, but when trying to bind it to excel surprise! i get System.NullReferenceException: 'Referencia a objeto no establecida como instancia de un objeto.' Reffering to Active Workbook.

Seems like Excel.Application is not actually working for a usercontrol.

```<code>    _xlapp = New Excel.Application
    Xlwb = _xlapp.ActiveWorkbook 'Fires the Exception
    XlAsh = Xlwb.ActiveSheet
</code>```

I have tried to get object thru marshall

```<code>     Dim _xlapp=Excel.Application
    _xlapp=ctype(GetObject("Excel.Application"),Excel.Application)
     Xlwb = _xlapp.ActiveWorkbook
     XlAsh = Xlwb.ActiveSheet
</code>```

And its the same.

I have also tried to deleting the refereces (desperate tried) in the Usercontrol project so it might be bound to the Addin Active Instance.

Im not really sure how the Interop behaves control level.

Any ideas?

答:
You don't need to create a new instance of excel application because you already have one, where your addin is running. You need to use

 Dim xlApp As Excel.Application = Globals.ThisAddIn.Application

 instead.

This will get an object of application where your addin is loaded and you will be able to get all it's methods and properties (like xlApp.ActiveSheet or xlApp.ActiveWorkbook).

Title: VSTO AddIn VB.net UserControl

Body:
Coding in VB.net

Custom Usercontrol + Interop - AddIn with Excel

I have been trying to replicate a refedit box for several forms.

(RefEdit: Control to select ranges as in inputbox)

i would use inputbox but is not practical sin just in one form im attemting to use around 15.

I successfuly added the custom control to the form and i tried the behavior of buttons, but when trying to bind it to excel surprise! i get System.NullReferenceException: 'Referencia a objeto no establecida como instancia de un objeto.' Reffering to Active Workbook.

Seems like Excel.Application is not actually working for a usercontrol.

    _xlapp = New Excel.Application
    Xlwb = _xlapp.ActiveWorkbook 'Fires the Exception
    XlAsh = Xlwb.ActiveSheet

I have tried to get object thru marshall

     Dim _xlapp=Excel.Application
    _xlapp=ctype(GetObject("Excel.Application"),Excel.Application)
     Xlwb = _xlapp.ActiveWorkbook
     XlAsh = Xlwb.ActiveSheet

And its the same.

I have also tried to deleting the refereces (desperate tried) in the Usercontrol project so it might be bound to the Addin Active Instance.

Im not really sure how the Interop behaves control level.

Any ideas?


问:
Range Slider how Implement Touch Mobile?
How could one implement mobile touch on this code to make the range slider work on mobile?

I found a lot of tutorials on the internet but they all contained jquery ui but I have a range slider without ui and I'm not good at JS.

$("document").ready(function() {

const rangeSliderAmount   = document.querySelector('.lc-range-slider-amount');
const rangeSliderMonth    = document.querySelector('.lc-range-slider-month');
const rangeValueBarAmount = document.querySelector('#lc-range-value-bar-amount');
const rangeValueBarMonth  = document.querySelector('#lc-range-value-bar-month');
const rangeValueAmount    = document.querySelector('#lc-range-value-amount');
const rangeValueMonth     = document.querySelector('#lc-range-value-month');
const rangeAmount         = document.getElementById("lc-amount");
const rangeMonth          = document.getElementById("lc-month");

let isDown = false;

function dragHandler() {
  isDown = !isDown;
  if (!isDown) {
    rangeValueAmount.style.setProperty('opacity', '1');
    rangeValueMonth.style.setProperty('opacity', '1');
  } else {
    rangeValueAmount.style.setProperty('opacity', '1');
    rangeValueMonth.style.setProperty('opacity', '1');
  }
}

function dragOn(e) {
  if (!isDown) return;
  rangeValueHandler();
}

function rangeValueHandler() {
  amountPercentage            = `${((rangeSliderAmount.value - 500) * 100) / (6000 - 500)}%`;
  monthPercentage             = `${((rangeSliderMonth.value - 6) * 100) / (60 - 6)}%`;
  rangeValueBarAmount.style.setProperty('width', amountPercentage);
  rangeValueBarMonth.style.setProperty('width', monthPercentage);
  rangeValueAmount.innerHTML  = `${rangeSliderAmount.value}`;
  rangeValueMonth.innerHTML   = `${rangeSliderMonth.value}`;
  rangeAmount.innerHTML       = `${rangeSliderAmount.value}`;
  rangeMonth.innerHTML        = `${rangeSliderMonth.value}`;
  vypocetSplatka();
}

rangeValueHandler();
rangeSliderAmount.addEventListener('mousedown', dragHandler);
rangeSliderAmount.addEventListener('mousemove', dragOn);
rangeSliderAmount.addEventListener('mouseup', dragHandler);
rangeSliderAmount.addEventListener('click', rangeValueHandler);

rangeSliderMonth.addEventListener('mousedown', dragHandler);
rangeSliderMonth.addEventListener('mousemove', dragOn);
rangeSliderMonth.addEventListener('mouseup', dragHandler);
rangeSliderMonth.addEventListener('click', rangeValueHandler);

function slideValue(inputElement) {
    var sliderElement = inputElement.closest('.lc-slider').find('.slider');
    var val = parseInt(inputElement.val().replace(' ', '')) || 0;
    var sliderMax = $(sliderElement).slider('option', 'max');
    var sliderMin = $(sliderElement).slider('option', 'min');

    if (val > sliderMax) {
        val = sliderMax;
    }
    if (val < sliderMin) {
        val = sliderMin;
    }
    $(sliderElement).slider('value', val);

    val = formatNumber(val, 0, ',', ' ');
    if (inputElement.val() !== val) {
      inputElement.val(val);
    }
  }

  $('.slider-value .value').change(function(){
    slideValue($(this));
    vypocetSplatka();
  });

  vypocetSplatka();

  $('.insurance-box').on('change', 'input[name=poistenie]', function(){
    vypocetSplatka();
  });

  function formatNumber(number, decimals, dec_point, thousands_sep) {
    var str = number.toFixed(decimals ? decimals : 0).toString().split('.');
    var parts = [];
    for (var i = str[0].length; i > 0; i -= 3) {
      parts.unshift(str[0].substring(Math.max(0, i - 3), i));
    }
    str[0] = parts.join(thousands_sep ? thousands_sep : ',');
    return str.join(dec_point ? dec_point : '.');
  }

  function vypocetSplatka() {
    var mesiace = parseInt($('[data-value="months"]').html());
    var pozicka = parseInt($('[data-value="loan"]').html().replace(' ', ''));
    var poplatok = (pozicka / 100) * 2;
    $('.hascharge').show();
    if(pozicka <= -1){
        poplatok = 0;
        $('.hascharge').hide();
    }
    var benefit = 2;
    var perc, payment_mpr, payment_mpr_full, insurance, payment_month, payment_month_full, suma, suma_full, rateValue, rpmn;
    $('[data-value="charge"]').text(poplatok);
    $('[data-value="months-val"]').text(mesiace);
    $('span[data-value="loan"]').text(price_format(pozicka));
    if (pozicka <= 300) {
      perc = 15.18;
    } else if (pozicka <= 700) {
      perc = 13.9;
    } else if (pozicka <= 1499) {
      perc = 11.4;
    } else {
      perc = 8.9;
    }
    if (pozicka <= 300 && mesiace<=60 && mesiace>=6) {
      perc = 15.18;
    } else if (pozicka <= 679 && mesiace<=60 && mesiace>=6) {
      perc = 13.9;
    } else if (pozicka <= 720 && mesiace<=60 && mesiace>=6) {
      perc = 10.01;
    } else if (pozicka <= 1499 && mesiace<=60 && mesiace>=6) {
      perc = 11.4;
    } else if (mesiace<=60 && mesiace>=6) {
      perc = 8.9;
    }

    var diff = (Math.round((perc - benefit) * 100) / 100).toFixed(2);
    diff = diff.replace('.', ',');
    $('[data-value="interest"]').text(diff);

    var pmt_ir_full = perc / 1200;
    var pmt_ir = (perc - benefit) / 1200;

    //pmt_ir = 13.9 / 1200;
    var pmt_np = mesiace;
    var pmt_pv = -pozicka;

    if (pmt_np > 0 && pmt_pv < 0) {
      payment_mpr = pmt(pmt_ir, pmt_np, pmt_pv);
      payment_mpr_full = pmt(pmt_ir_full, pmt_np, pmt_pv);

      $('.insurance-label').text('');
      // poistenie
      insurance = 0;

      if ($('input[name=poistenie]:checked').val() === '1') {
        insurance += 0.081 * pozicka / 100;
        $('.insurance-label').text('vrátane poistenia');
      }
      if ($('input[name=poistenie]:checked').val() === '2') {
        insurance += 0.148 * pozicka / 100;
        $('.insurance-label').text('vrátane poistenia');
      }
      //payment_mpr += ' €';
      payment_month = rd(payment_mpr + insurance);
      payment_month_full = rd(payment_mpr_full + insurance);
      payment_mpr = rd(payment_mpr);

      suma = payment_month * mesiace + poplatok;
      suma_full = payment_month_full * mesiace + poplatok;

      $('#clientsave').html(price_format(suma_full - suma) + ' €');

    } else {
      payment_mpr = '';
    }
    $('[data-value="fee"]').html(price_format(payment_month));
    $('[data-value="fee-val"]').text(price_format(payment_mpr));

    rateValue = rate(pmt_np, payment_mpr, -pozicka + poplatok);
    rpmn = (Math.pow(rateValue + 1, 12) - 1) * 100;
    $('[data-value="rpmn-val"]').text(price_format(rpmn));
    $('[data-value="sum"]').text(price_format(payment_mpr * mesiace + poplatok));

    $('#vyskaF').val(pozicka);
    $('#splatnostF').val(mesiace);
  if ($('input[name=poistenie]:checked').val() === '0') { $('#poistenieF').val("bez poistenia"); };
  if ($('input[name=poistenie]:checked').val() === '1') { $('#poistenieF').val("základné"); };
  if ($('input[name=poistenie]:checked').val() === '2') { $('#poistenieF').val("rozšírené"); };

  //bez benefitu repre priklad *NEW 16.11:2017 -- START
  var diffWo = (Math.round((perc) * 100) / 100).toFixed(2);
  diffWo = diffWo.replace('.', ',');
  payment_mpr_full = rd(payment_mpr_full);

  var rateValue_full, rpmn_full;
  rateValue_full = rate(pmt_np, payment_mpr_full, -pozicka + poplatok);
  rpmn_full = (Math.pow(rateValue_full + 1, 12) - 1) * 100;

  $('[data-value="interest-wo"]').text(diffWo);
  $('[data-value="fee-val-wo"]').text(price_format(payment_mpr_full));
  $('[data-value="rpmn-val-wo"]').text(price_format(rpmn_full));
  $('[data-value="sum-wo"]').text(price_format(payment_mpr_full * mesiace + poplatok));
  // *NEW 16.11:2017 -- END

  }

  function rd(n) {
    var r = Math.round(n * 100) / 100;
    return r;
  }

  function price_format(number, decimals, decPoint, thousandsSep) {

    decimals = decimals || 2;
    number = parseFloat(number);

    if (!decPoint || !thousandsSep) {
      decPoint = ',';
      thousandsSep = ' ';
    }

    var roundedNumber = Math.round(Math.abs(number) * ('1e' + decimals)) + '';
    var numbersString = decimals ? roundedNumber.slice(0, decimals * -1) : roundedNumber;
    var decimalsString = decimals ? roundedNumber.slice(decimals * -1) : '';
    var formattedNumber = '';

    while (numbersString.length > 3) {
      formattedNumber += thousandsSep + numbersString.slice(-3);
      numbersString = numbersString.slice(0, -3);
    }

    return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : '');
  }

  //function pmt(ir, np, pv, fv = 0, type = 0) {  //defaul value nie je vsade podporovane!!! RBR
  function pmt(ir, np, pv, fv, type) {

    var fv = (typeof fv !== 'undefined') ?  fv : 0;
    var type = (typeof type !== 'undefined') ?  type : 0;

    /*
     * ir   - interest rate per month
     * np   - number of periods (months)
     * pv   - present value
     * fv   - future value
     * type - when the payments are due:
     *        0: end of the period, e.g. end of month (default)
     *        1: beginning of period
     */

    if (ir === 0) {
      return -(pv + fv) / np;
    }

    var pvif = Math.pow(1 + ir, np);
    var pmt = -ir * pv * (pvif + fv) / (pvif - 1);

    if (type === 1) {
      pmt /= (1 + ir);
    }

    return pmt;
  }

  function rate(paymentsPerYear, paymentAmount, presentValue, futureValue, dueEndOrBeginning, interest) {
    //If interest, futureValue, dueEndorBeginning was not set, set now
    if (interest == null) {
      interest = 0.01;
    }

    if (futureValue == null) {
      futureValue = 0;
    }

    if (dueEndOrBeginning == null) {
      dueEndOrBeginning = 0;

    }

    var FINANCIAL_MAX_ITERATIONS = 128; //Bet accuracy with 128
    var FINANCIAL_PRECISION = 0.0000001; //1.0e-8

    var y, y0, y1, x0, x1 = 0,
      f = 0,
      i = 0;
    var rate = interest;
    if (Math.abs(rate) < FINANCIAL_PRECISION) {
      y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue;
    } else {
      f = Math.exp(paymentsPerYear * Math.log(1 + rate));
      y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;
    }
    y0 = presentValue + paymentAmount * paymentsPerYear + futureValue;
    y1 = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;

    // find root by Newton secant method
    i = x0 = 0.0;
    x1 = rate;
    while ((Math.abs(y0 - y1) > FINANCIAL_PRECISION) &&
      (i < FINANCIAL_MAX_ITERATIONS)) {
      rate = (y1 * x0 - y0 * x1) / (y1 - y0);
      x0 = x1;
      x1 = rate;

      if (Math.abs(rate) < FINANCIAL_PRECISION) {
        y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue;
      } else {
        f = Math.exp(paymentsPerYear * Math.log(1 + rate));
        y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;
      }

      y0 = y1;
      y1 = y;
      ++i;
    }
    return rate;
  }

});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #EFEEEE;
}
.lc-container {
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.lc-sliders {
  width: 70%;
  padding: 0;
  background-color: #fff;
  border-top: 5px solid #E9EFF4;
  border-bottom: 5px solid #E9EFF4;
  border-left: 5px solid #E9EFF4;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.lc-slider {
  width: 100%;
  margin: 0;
  padding: 10px;
  background: transparent;
}
.lc-slider:first-child {
  border-bottom: 1px solid #E9EFF4;
}
.lc-txtinp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lc-amount {
  width: 90px;
  height: 90px;
  position: relative;
  display: block;
  padding-top: 13px;
  line-height: 30px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #FC6E50;
  font-style: normal;
  line-height: normal;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #EFEEEE;
  transform-origin: center center;
  background: #fff;
}
.lc-amount::after {
  display: block;
  content: "EUR";
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: -2px;
}
.lc-month {
  width: 90px;
  height: 90px;
  position: relative;
  display: block;
  padding-top: 13px;
  line-height: 30px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #FC6E50;
  font-style: normal;
  line-height: normal;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #EFEEEE;
  transform-origin: center center;
  background: #fff;
}
.lc-month::after {
  display: block;
  content: "Mes.";
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: -2px;
}
.lc-ranger {
  width: 100%;
}
.lc-range {
  margin: 20px 0;
  position: relative;
}
.lc-minmax {
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lc-txtinp span.span,
.lc-minmax span.span {
  font-size: 14px;
  font-weight: 400;
}
.lc-summarize {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30%;
  height: 421px;
  padding: 0;
  background: #fff;
  border-left: 2px solid #E9EFF4;
  border-top: 5px solid #E9EFF4;
  border-bottom: 5px solid #E9EFF4;
  border-right: 5px solid #E9EFF4;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.lc-summarize-head {
  padding: 25px 0;
  text-align: center;
}
.lc-summarize-head h2 {
  font-size: 20px;
  background: none;
  color: #4d4d4d;
  margin-bottom: 0;
  background-repeat: no-repeat;
}
.lc-show-payment {
  padding: 5px;
}
.lc-payment-show {
  width: 200px;
  height: 200px;
  position: relative;
  display: block;
  margin: 0 auto;
  padding-top: 60px;
  line-height: 30px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #FC6E50;
  font-style: normal;
  line-height: normal;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #EFEEEE;
  transform-origin: center center;
  background: #fff;
}
.lc-payment-show::after {
  display: block;
  content: "EUR/MES.";
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: -2px;
}
.lc-accept-loan {
  padding: 0;
  text-align: center;
  border-top: 2px solid #E9EFF4;
}
a.send-loan-details,
button.send-loan-details {
  text-decoration: none;
  outline: none;
  border: none;
  display: block;
  text-align: center;
  width: 100%;
  padding: 15px 0;
  background: #fff;
  font-size: 20px;
  color: #4d4d4d;
  margin-bottom: 0;
  background-repeat: no-repeat;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}
a.send-loan-details:hover,
a.send-loan-details:focus,
button.send-loan-details:hover,
button.send-loan-details:focus {
  background: #FC6E50;
  color: #fff;
}
.lc-representative-example {
  font-size: 12px;
  width: 100%;
  position: relative;
  margin: 15px 0;
  padding: 5px 0;
  display: block;
}
.lc-representative-example span.spanbold {
  color: #4d4d4d;
  font-weight: bold;
}

.lc-range-slider-container {
  position: relative;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  position: absolute;
  top: 0;
  margin: 0;
}
#lc-range-value-bar-amount {
  width: 100%;
  content: "0";
  background-color: #FC6E50;
  position: absolute;
  z-index: 10000;
  height: 25px;
  top: 0;
  margin: 0;
  border-radius: 5px;
}
#lc-range-value-bar-month {
  width: 100%;
  content: "0";
  background-color: #FC6E50;
  position: absolute;
  z-index: 10000;
  height: 25px;
  top: 0;
  margin: 0;
  border-radius: 5px;
}
/*
#range-value {
  content:"0";
  background: rgba(233, 239, 244, 0.1);;
  position: absolute;
  z-index: 10000;
  height: 25px;
  top: -65px;
  margin: 0;
  border-radius: 5px;
  left: 50%;
  transform0: translateX(-50%);
  font-size: 20px;
  padding: 12px;
  color: #41576B;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
  text-align: center;
  opacity: 0;
}*/

input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 25px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #E9EFF4;
  border-radius: 5px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
  border: 14px solid #FFF;
  height: 53px;
  width: 53px;
  border-radius: 30px;
  background: #FC6E50;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -13.5px;
  position: relative;
  z-index: 1000000000;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #000;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #000000;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #000;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #000;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #000;
  cursor: pointer;
}</code>```

                                Zvoľte si výšku pôžičky
                                2000

                                  <input id="lc-range-amount" type="range" class="slider lc-range-slider-amount" min="500" max="6000" step="100" value="500">

                                  0

                                500€
                                6000€

                                Zvoľte si dobu splatnosti
                                6

                                  <input id="lc-range-month" type="range" class="slider lc-range-slider-month" min="6" max="60" step="1" value="6">

                                  0

                                6 mesiacov
                                60 mesiacov

Vaša mesačná splátka

                                0,00

                            <button type="submit" class="send-loan-details">
                                Chcem pôžičku
                            </button>

                    Reprezentatívny príklad: Mesačná anuitná splátka Pôžičky s odmenou vo výške 2 000,00 € s úrokovou sadzbou
                    13,18 % p.a. a splatnosťou 60 mesiacov predstavuje
                    45,69 €. Ročná percentuálna miera nákladov dosahuje
                    15,03 %, počet splátok 60.
                    Výška poplatku za poskytnutie pôžičky je 2 % z výšky úveru, v tomto prípade 40 €.
                    Celková čiastka, ktorú musí klient zaplatiť, predstavuje 2 781,40 eur. Na schválenie a poskytnutie pôžičky nie je právny nárok. Výška splátky je uvedená bez Poistenia schopnosti splácať úver.

```

答:
You need to attach handlers for touch events to make the range sliders work in mobile. If you add the below lines to your code, it will start working in mobile.

```<code>  rangeSliderAmount.addEventListener('touchstart', dragHandler);
  rangeSliderAmount.addEventListener('touchmove', dragOn);
  rangeSliderAmount.addEventListener('touchend', dragHandler);
  rangeSliderAmount.addEventListener('touchstart', rangeValueHandler);
  rangeSliderMonth.addEventListener('touchstart', dragHandler);
  rangeSliderMonth.addEventListener('touchmove', dragOn);
  rangeSliderMonth.addEventListener('touchend', dragHandler);
  rangeSliderMonth.addEventListener('touchstart', rangeValueHandler);
</code>```

Refer this document to learn about touch events in javascript:

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Working sample based on your code:

https://plnkr.co/edit/TDLHWvaYFr1V8GQqZ9Zb

Body:
How could one implement mobile touch on this code to make the range slider work on mobile?

I found a lot of tutorials on the internet but they all contained jquery ui but I have a range slider without ui and I'm not good at JS.

$("document").ready(function() {

const rangeSliderAmount   = document.querySelector('.lc-range-slider-amount');
const rangeSliderMonth    = document.querySelector('.lc-range-slider-month');
const rangeValueBarAmount = document.querySelector('#lc-range-value-bar-amount');
const rangeValueBarMonth  = document.querySelector('#lc-range-value-bar-month');
const rangeValueAmount    = document.querySelector('#lc-range-value-amount');
const rangeValueMonth     = document.querySelector('#lc-range-value-month');
const rangeAmount         = document.getElementById("lc-amount");
const rangeMonth          = document.getElementById("lc-month");

let isDown = false;

function dragHandler() {
  isDown = !isDown;
  if (!isDown) {
    rangeValueAmount.style.setProperty('opacity', '1');
    rangeValueMonth.style.setProperty('opacity', '1');
  } else {
    rangeValueAmount.style.setProperty('opacity', '1');
    rangeValueMonth.style.setProperty('opacity', '1');
  }
}

function dragOn(e) {
  if (!isDown) return;
  rangeValueHandler();
}

function rangeValueHandler() {
  amountPercentage            = `${((rangeSliderAmount.value - 500) * 100) / (6000 - 500)}%`;
  monthPercentage             = `${((rangeSliderMonth.value - 6) * 100) / (60 - 6)}%`;
  rangeValueBarAmount.style.setProperty('width', amountPercentage);
  rangeValueBarMonth.style.setProperty('width', monthPercentage);
  rangeValueAmount.innerHTML  = `${rangeSliderAmount.value}`;
  rangeValueMonth.innerHTML   = `${rangeSliderMonth.value}`;
  rangeAmount.innerHTML       = `${rangeSliderAmount.value}`;
  rangeMonth.innerHTML        = `${rangeSliderMonth.value}`;
  vypocetSplatka();
}

rangeValueHandler();
rangeSliderAmount.addEventListener('mousedown', dragHandler);
rangeSliderAmount.addEventListener('mousemove', dragOn);
rangeSliderAmount.addEventListener('mouseup', dragHandler);
rangeSliderAmount.addEventListener('click', rangeValueHandler);

rangeSliderMonth.addEventListener('mousedown', dragHandler);
rangeSliderMonth.addEventListener('mousemove', dragOn);
rangeSliderMonth.addEventListener('mouseup', dragHandler);
rangeSliderMonth.addEventListener('click', rangeValueHandler);

function slideValue(inputElement) {
    var sliderElement = inputElement.closest('.lc-slider').find('.slider');
    var val = parseInt(inputElement.val().replace(' ', '')) || 0;
    var sliderMax = $(sliderElement).slider('option', 'max');
    var sliderMin = $(sliderElement).slider('option', 'min');

    if (val > sliderMax) {
        val = sliderMax;
    }
    if (val < sliderMin) {
        val = sliderMin;
    }
    $(sliderElement).slider('value', val);

    val = formatNumber(val, 0, ',', ' ');
    if (inputElement.val() !== val) {
      inputElement.val(val);
    }
  }

  $('.slider-value .value').change(function(){
    slideValue($(this));
    vypocetSplatka();
  });

  vypocetSplatka();

  $('.insurance-box').on('change', 'input[name=poistenie]', function(){
    vypocetSplatka();
  });

  function formatNumber(number, decimals, dec_point, thousands_sep) {
    var str = number.toFixed(decimals ? decimals : 0).toString().split('.');
    var parts = [];
    for (var i = str[0].length; i > 0; i -= 3) {
      parts.unshift(str[0].substring(Math.max(0, i - 3), i));
    }
    str[0] = parts.join(thousands_sep ? thousands_sep : ',');
    return str.join(dec_point ? dec_point : '.');
  }

  function vypocetSplatka() {
    var mesiace = parseInt($('[data-value="months"]').html());
    var pozicka = parseInt($('[data-value="loan"]').html().replace(' ', ''));
    var poplatok = (pozicka / 100) * 2;
    $('.hascharge').show();
    if(pozicka <= -1){
        poplatok = 0;
        $('.hascharge').hide();
    }
    var benefit = 2;
    var perc, payment_mpr, payment_mpr_full, insurance, payment_month, payment_month_full, suma, suma_full, rateValue, rpmn;
    $('[data-value="charge"]').text(poplatok);
    $('[data-value="months-val"]').text(mesiace);
    $('span[data-value="loan"]').text(price_format(pozicka));
    if (pozicka <= 300) {
      perc = 15.18;
    } else if (pozicka <= 700) {
      perc = 13.9;
    } else if (pozicka <= 1499) {
      perc = 11.4;
    } else {
      perc = 8.9;
    }
    if (pozicka <= 300 && mesiace<=60 && mesiace>=6) {
      perc = 15.18;
    } else if (pozicka <= 679 && mesiace<=60 && mesiace>=6) {
      perc = 13.9;
    } else if (pozicka <= 720 && mesiace<=60 && mesiace>=6) {
      perc = 10.01;
    } else if (pozicka <= 1499 && mesiace<=60 && mesiace>=6) {
      perc = 11.4;
    } else if (mesiace<=60 && mesiace>=6) {
      perc = 8.9;
    }

    var diff = (Math.round((perc - benefit) * 100) / 100).toFixed(2);
    diff = diff.replace('.', ',');
    $('[data-value="interest"]').text(diff);

    var pmt_ir_full = perc / 1200;
    var pmt_ir = (perc - benefit) / 1200;

    //pmt_ir = 13.9 / 1200;
    var pmt_np = mesiace;
    var pmt_pv = -pozicka;

    if (pmt_np > 0 && pmt_pv < 0) {
      payment_mpr = pmt(pmt_ir, pmt_np, pmt_pv);
      payment_mpr_full = pmt(pmt_ir_full, pmt_np, pmt_pv);

      $('.insurance-label').text('');
      // poistenie
      insurance = 0;

      if ($('input[name=poistenie]:checked').val() === '1') {
        insurance += 0.081 * pozicka / 100;
        $('.insurance-label').text('vrátane poistenia');
      }
      if ($('input[name=poistenie]:checked').val() === '2') {
        insurance += 0.148 * pozicka / 100;
        $('.insurance-label').text('vrátane poistenia');
      }
      //payment_mpr += ' €';
      payment_month = rd(payment_mpr + insurance);
      payment_month_full = rd(payment_mpr_full + insurance);
      payment_mpr = rd(payment_mpr);

      suma = payment_month * mesiace + poplatok;
      suma_full = payment_month_full * mesiace + poplatok;

      $('#clientsave').html(price_format(suma_full - suma) + ' €');

    } else {
      payment_mpr = '';
    }
    $('[data-value="fee"]').html(price_format(payment_month));
    $('[data-value="fee-val"]').text(price_format(payment_mpr));

    rateValue = rate(pmt_np, payment_mpr, -pozicka + poplatok);
    rpmn = (Math.pow(rateValue + 1, 12) - 1) * 100;
    $('[data-value="rpmn-val"]').text(price_format(rpmn));
    $('[data-value="sum"]').text(price_format(payment_mpr * mesiace + poplatok));

    $('#vyskaF').val(pozicka);
    $('#splatnostF').val(mesiace);
  if ($('input[name=poistenie]:checked').val() === '0') { $('#poistenieF').val("bez poistenia"); };
  if ($('input[name=poistenie]:checked').val() === '1') { $('#poistenieF').val("základné"); };
  if ($('input[name=poistenie]:checked').val() === '2') { $('#poistenieF').val("rozšírené"); };

  //bez benefitu repre priklad *NEW 16.11:2017 -- START
  var diffWo = (Math.round((perc) * 100) / 100).toFixed(2);
  diffWo = diffWo.replace('.', ',');
  payment_mpr_full = rd(payment_mpr_full);

  var rateValue_full, rpmn_full;
  rateValue_full = rate(pmt_np, payment_mpr_full, -pozicka + poplatok);
  rpmn_full = (Math.pow(rateValue_full + 1, 12) - 1) * 100;

  $('[data-value="interest-wo"]').text(diffWo);
  $('[data-value="fee-val-wo"]').text(price_format(payment_mpr_full));
  $('[data-value="rpmn-val-wo"]').text(price_format(rpmn_full));
  $('[data-value="sum-wo"]').text(price_format(payment_mpr_full * mesiace + poplatok));
  // *NEW 16.11:2017 -- END

  }

  function rd(n) {
    var r = Math.round(n * 100) / 100;
    return r;
  }

  function price_format(number, decimals, decPoint, thousandsSep) {

    decimals = decimals || 2;
    number = parseFloat(number);

    if (!decPoint || !thousandsSep) {
      decPoint = ',';
      thousandsSep = ' ';
    }

    var roundedNumber = Math.round(Math.abs(number) * ('1e' + decimals)) + '';
    var numbersString = decimals ? roundedNumber.slice(0, decimals * -1) : roundedNumber;
    var decimalsString = decimals ? roundedNumber.slice(decimals * -1) : '';
    var formattedNumber = '';

    while (numbersString.length > 3) {
      formattedNumber += thousandsSep + numbersString.slice(-3);
      numbersString = numbersString.slice(0, -3);
    }

    return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : '');
  }

  //function pmt(ir, np, pv, fv = 0, type = 0) {  //defaul value nie je vsade podporovane!!! RBR
  function pmt(ir, np, pv, fv, type) {

    var fv = (typeof fv !== 'undefined') ?  fv : 0;
    var type = (typeof type !== 'undefined') ?  type : 0;

    /*
     * ir   - interest rate per month
     * np   - number of periods (months)
     * pv   - present value
     * fv   - future value
     * type - when the payments are due:
     *        0: end of the period, e.g. end of month (default)
     *        1: beginning of period
     */

    if (ir === 0) {
      return -(pv + fv) / np;
    }

    var pvif = Math.pow(1 + ir, np);
    var pmt = -ir * pv * (pvif + fv) / (pvif - 1);

    if (type === 1) {
      pmt /= (1 + ir);
    }

    return pmt;
  }

  function rate(paymentsPerYear, paymentAmount, presentValue, futureValue, dueEndOrBeginning, interest) {
    //If interest, futureValue, dueEndorBeginning was not set, set now
    if (interest == null) {
      interest = 0.01;
    }

    if (futureValue == null) {
      futureValue = 0;
    }

    if (dueEndOrBeginning == null) {
      dueEndOrBeginning = 0;

    }

    var FINANCIAL_MAX_ITERATIONS = 128; //Bet accuracy with 128
    var FINANCIAL_PRECISION = 0.0000001; //1.0e-8

    var y, y0, y1, x0, x1 = 0,
      f = 0,
      i = 0;
    var rate = interest;
    if (Math.abs(rate) < FINANCIAL_PRECISION) {
      y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue;
    } else {
      f = Math.exp(paymentsPerYear * Math.log(1 + rate));
      y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;
    }
    y0 = presentValue + paymentAmount * paymentsPerYear + futureValue;
    y1 = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;

    // find root by Newton secant method
    i = x0 = 0.0;
    x1 = rate;
    while ((Math.abs(y0 - y1) > FINANCIAL_PRECISION) &&
      (i < FINANCIAL_MAX_ITERATIONS)) {
      rate = (y1 * x0 - y0 * x1) / (y1 - y0);
      x0 = x1;
      x1 = rate;

      if (Math.abs(rate) < FINANCIAL_PRECISION) {
        y = presentValue * (1 + paymentsPerYear * rate) + paymentAmount * (1 + rate * dueEndOrBeginning) * paymentsPerYear + futureValue;
      } else {
        f = Math.exp(paymentsPerYear * Math.log(1 + rate));
        y = presentValue * f + paymentAmount * (1 / rate + dueEndOrBeginning) * (f - 1) + futureValue;
      }

      y0 = y1;
      y1 = y;
      ++i;
    }
    return rate;
  }

});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #EFEEEE;
}
.lc-container {
  margin-top: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.lc-sliders {
  width: 70%;
  padding: 0;
  background-color: #fff;
  border-top: 5px solid #E9EFF4;
  border-bottom: 5px solid #E9EFF4;
  border-left: 5px solid #E9EFF4;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.lc-slider {
  width: 100%;
  margin: 0;
  padding: 10px;
  background: transparent;
}
.lc-slider:first-child {
  border-bottom: 1px solid #E9EFF4;
}
.lc-txtinp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lc-amount {
  width: 90px;
  height: 90px;
  position: relative;
  display: block;
  padding-top: 13px;
  line-height: 30px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #FC6E50;
  font-style: normal;
  line-height: normal;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #EFEEEE;
  transform-origin: center center;
  background: #fff;
}
.lc-amount::after {
  display: block;
  content: "EUR";
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: -2px;
}
.lc-month {
  width: 90px;
  height: 90px;
  position: relative;
  display: block;
  padding-top: 13px;
  line-height: 30px;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #FC6E50;
  font-style: normal;
  line-height: normal;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #EFEEEE;
  transform-origin: center center;
  background: #fff;
}
.lc-month::after {
  display: block;
  content: "Mes.";
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: -2px;
}
.lc-ranger {
  width: 100%;
}
.lc-range {
  margin: 20px 0;
  position: relative;
}
.lc-minmax {
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lc-txtinp span.span,
.lc-minmax span.span {
  font-size: 14px;
  font-weight: 400;
}
.lc-summarize {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30%;
  height: 421px;
  padding: 0;
  background: #fff;
  border-left: 2px solid #E9EFF4;
  border-top: 5px solid #E9EFF4;
  border-bottom: 5px solid #E9EFF4;
  border-right: 5px solid #E9EFF4;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.lc-summarize-head {
  padding: 25px 0;
  text-align: center;
}
.lc-summarize-head h2 {
  font-size: 20px;
  background: none;
  color: #4d4d4d;
  margin-bottom: 0;
  background-repeat: no-repeat;
}
.lc-show-payment {
  padding: 5px;
}
.lc-payment-show {
  width: 200px;
  height: 200px;
  position: relative;
  display: block;
  margin: 0 auto;
  padding-top: 60px;
  line-height: 30px;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #FC6E50;
  font-style: normal;
  line-height: normal;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid #EFEEEE;
  transform-origin: center center;
  background: #fff;
}
.lc-payment-show::after {
  display: block;
  content: "EUR/MES.";
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: -2px;
}
.lc-accept-loan {
  padding: 0;
  text-align: center;
  border-top: 2px solid #E9EFF4;
}
a.send-loan-details,
button.send-loan-details {
  text-decoration: none;
  outline: none;
  border: none;
  display: block;
  text-align: center;
  width: 100%;
  padding: 15px 0;
  background: #fff;
  font-size: 20px;
  color: #4d4d4d;
  margin-bottom: 0;
  background-repeat: no-repeat;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}
a.send-loan-details:hover,
a.send-loan-details:focus,
button.send-loan-details:hover,
button.send-loan-details:focus {
  background: #FC6E50;
  color: #fff;
}
.lc-representative-example {
  font-size: 12px;
  width: 100%;
  position: relative;
  margin: 15px 0;
  padding: 5px 0;
  display: block;
}
.lc-representative-example span.spanbold {
  color: #4d4d4d;
  font-weight: bold;
}

.lc-range-slider-container {
  position: relative;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  position: absolute;
  top: 0;
  margin: 0;
}
#lc-range-value-bar-amount {
  width: 100%;
  content: "0";
  background-color: #FC6E50;
  position: absolute;
  z-index: 10000;
  height: 25px;
  top: 0;
  margin: 0;
  border-radius: 5px;
}
#lc-range-value-bar-month {
  width: 100%;
  content: "0";
  background-color: #FC6E50;
  position: absolute;
  z-index: 10000;
  height: 25px;
  top: 0;
  margin: 0;
  border-radius: 5px;
}
/*
#range-value {
  content:"0";
  background: rgba(233, 239, 244, 0.1);;
  position: absolute;
  z-index: 10000;
  height: 25px;
  top: -65px;
  margin: 0;
  border-radius: 5px;
  left: 50%;
  transform0: translateX(-50%);
  font-size: 20px;
  padding: 12px;
  color: #41576B;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
  text-align: center;
  opacity: 0;
}*/

input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 25px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #E9EFF4;
  border-radius: 5px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.08);
  border: 14px solid #FFF;
  height: 53px;
  width: 53px;
  border-radius: 30px;
  background: #FC6E50;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -13.5px;
  position: relative;
  z-index: 1000000000;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #000;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #000000;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #000;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #000;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #000;
  cursor: pointer;
}

                                Zvoľte si výšku pôžičky
                                2000

                                  <input id="lc-range-amount" type="range" class="slider lc-range-slider-amount" min="500" max="6000" step="100" value="500">

                                  0

                                500€
                                6000€

                                Zvoľte si dobu splatnosti
                                6

                                  <input id="lc-range-month" type="range" class="slider lc-range-slider-month" min="6" max="60" step="1" value="6">

                                  0

                                6 mesiacov
                                60 mesiacov

Vaša mesačná splátka

                                0,00

                            <button type="submit" class="send-loan-details">
                                Chcem pôžičku
                            </button>

                    Reprezentatívny príklad: Mesačná anuitná splátka Pôžičky s odmenou vo výške 2 000,00 € s úrokovou sadzbou
                    13,18 % p.a. a splatnosťou 60 mesiacov predstavuje
                    45,69 €. Ročná percentuálna miera nákladov dosahuje
                    15,03 %, počet splátok 60.
                    Výška poplatku za poskytnutie pôžičky je 2 % z výšky úveru, v tomto prípade 40 €.
                    Celková čiastka, ktorú musí klient zaplatiť, predstavuje 2 781,40 eur. Na schválenie a poskytnutie pôžičky nie je právny nárok. Výška splátky je uvedená bez Poistenia schopnosti splácať úver.

Body:
You need to attach handlers for touch events to make the range sliders work in mobile. If you add the below lines to your code, it will start working in mobile.

  rangeSliderAmount.addEventListener('touchstart', dragHandler);
  rangeSliderAmount.addEventListener('touchmove', dragOn);
  rangeSliderAmount.addEventListener('touchend', dragHandler);
  rangeSliderAmount.addEventListener('touchstart', rangeValueHandler);
  rangeSliderMonth.addEventListener('touchstart', dragHandler);
  rangeSliderMonth.addEventListener('touchmove', dragOn);
  rangeSliderMonth.addEventListener('touchend', dragHandler);
  rangeSliderMonth.addEventListener('touchstart', rangeValueHandler);

Refer this document to learn about touch events in javascript:

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

Working sample based on your code:

https://plnkr.co/edit/TDLHWvaYFr1V8GQqZ9Zb


问:
How to separate regex values?
the user makes a selection and I want to test if the selection is valid. So e.g.

```<code> preg_match("/(test1/test2|test3)/", $value)
</code>```

The problem is that one value is test1/test2, but each test is treated as a single value.  Any idea how to change that to have test1/test2 as a single value?

Eg:

```<code>test1/test2,
test3
</code>```

答:
Not sure on the specifics of php regex but i think if you wrap it in parenthesis to make it a group it might work.

Also if your not doing anything more fancy than your example it might just be faster/easier to look check if the value is in an array

Title: How to separate regex values?

Body:
the user makes a selection and I want to test if the selection is valid. So e.g.

 preg_match("/(test1/test2|test3)/", $value)

The problem is that one value is test1/test2, but each test is treated as a single value.  Any idea how to change that to have test1/test2 as a single value?

Eg:

test1/test2,
test3


问:
How to use Google sheet API V4 insert note in cell by python
I don't know how to add note in a cell by Google Sheet API:
https://developers.google.com/sheets/api/guides/values#writing_multiple_ranges

I read info of Google Sheet API:  https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets#CellData

I also read this question but it's still not working
Is it possible to use the Google Spreadsheet API to add a comment in a cell?

I don't know how to set note in the value.
I need someone help ~!
Thanks a lot.

```<code>from __future__ import print_function
import httplib2
import os

from apiclient import discovery
from oauth2client import client
from oauth2client import tools
from oauth2client.file import Storage

try:
    import argparse
    flags = argparse.ArgumentParser(parents=[tools.argparser]).parse_args()
except ImportError:
    flags = None

# If modifying these scopes, delete your previously saved credentials
# at ~/.credentials/sheets.googleapis.com-python-quickstart.json
# Scope type --> https://developers.google.com/sheets/api/guides/authorizing
SCOPES = 'https://www.googleapis.com/auth/spreadsheets'
CLIENT_SECRET_FILE = 'client_secret.json'        # credentials file name
APPLICATION_NAME = 'auto_update_caspar'

def get_credentials():
"""Gets valid user credentials from storage.

If nothing has been stored, or if the stored credentials are invalid,
the OAuth2 flow is completed to obtain the new credentials.

Returns:
    Credentials, the obtained credential.
"""
home_dir = os.path.expanduser('~')
credential_dir = os.path.join(home_dir, '.credentials')
if not os.path.exists(credential_dir):
    os.makedirs(credential_dir)
credential_path = os.path.join(credential_dir,
                               'auto_update_client_caspar.json')

store = Storage(credential_path)
credentials = store.get()
if not credentials or credentials.invalid:
    flow = client.flow_from_clientsecrets(CLIENT_SECRET_FILE, SCOPES)
    flow.user_agent = APPLICATION_NAME
    if flags:
        credentials = tools.run_flow(flow, store, flags)
    else: # Needed only for compatibility with Python 2.6
        credentials = tools.run(flow, store)
    print('Storing credentials to ' + credential_path)
return credentials

def main():
"""Shows basic usage of the Sheets API.

Creates a Sheets API service object and prints the names and majors of
students in a sample spreadsheet:
https://docs.google.com/spreadsheets/d/1k7OmDU_QUrCPVmsEpWFRCj-4BOu6PcUb7-SQlA7T_8I/edit
"""
credentials = get_credentials()
http = credentials.authorize(httplib2.Http())
discoveryUrl = ('https://sheets.googleapis.com/$discovery/rest?'
                'version=v4')
service = discovery.build('sheets', 'v4', http=http,
                          discoveryServiceUrl=discoveryUrl)

spreadsheetId = '1lEJeSNe5T3rNXEEMjY4D04QkoW-ngOeiFo40_S4H4FI'
rangeName = 'stress_temp!A3'

result = service.spreadsheets().values().get(
    spreadsheetId=spreadsheetId, range=rangeName).execute()
print (result)
values = result.get('values', [])

if not values:
    print('No data found.')
else:
    print('Name, Major:')
    for row in values:
        # Print columns A and E, which correspond to indices 0 and 4.
        print('%s' % row[0])

value_input_option = 'RAW'
range_name = 'stress_temp!A3'
values = [['aa']]
data = [
    {
        'range': range_name,
        'values': values
    },
]`enter code here`
body = {
  'valueInputOption': value_input_option,
  'data': data
}
result = service.spreadsheets().values().batchUpdate(
    spreadsheetId=spreadsheetId, body=body).execute()

if __name__ == '__main__':
main()
</code>```

答:
In Python, I use this piece of code and it work.

```<code>from googleapiclient.discovery import build
from google.oauth2 import service_account

SCOPES = ["https://www.googleapis.com/auth/drive", "https://www.googleapis.com/auth/drive.file",
                  "https://www.googleapis.com/auth/spreadsheets"]
SERVICE_ACCOUNT_FILE = 'credentials.json'

credentials = service_account.Credentials.from_service_account_file(SERVICE_ACCOUNT_FILE, scopes=SCOPES)
service = build('sheets', 'v4', credentials=credentials)

spreadsheetId = "O188999ITC"
sheetid_src = "123a"
notes = {
            "updateCells": {
                "range": {
                    "sheetId": sheetid_src,
                    "startRowIndex": 1,
                    "endRowIndex: 1,
                    "startColumnIndex": 1,
                    "endColumnIndex": 1
                },
                "rows": [
                    {
                        "values": [
                            {
                                "note": "my note"
                            }
                        ]
                    }
                ],
                "fields": "note"
            }
        }
body = {"requests":[notes]}
result = service.spreadsheets().values().batchUpdate(
    spreadsheetId=spreadsheetId, body=body).execute()

</code>```

Note are available in API with cellData, so you have to update values of differents cells with the keyword "Notes".

You can find more information here :
https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets/cells#celldata

Body:
I don't know how to add note in a cell by Google Sheet API:
https://developers.google.com/sheets/api/guides/values#writing_multiple_ranges

I read info of Google Sheet API:  https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets#CellData

I also read this question but it's still not working
Is it possible to use the Google Spreadsheet API to add a comment in a cell?

I don't know how to set note in the value.
I need someone help ~!
Thanks a lot.

from __future__ import print_function
import httplib2
import os

from apiclient import discovery
from oauth2client import client
from oauth2client import tools
from oauth2client.file import Storage

try:
    import argparse
    flags = argparse.ArgumentParser(parents=[tools.argparser]).parse_args()
except ImportError:
    flags = None

# If modifying these scopes, delete your previously saved credentials
# at ~/.credentials/sheets.googleapis.com-python-quickstart.json
# Scope type --> https://developers.google.com/sheets/api/guides/authorizing
SCOPES = 'https://www.googleapis.com/auth/spreadsheets'
CLIENT_SECRET_FILE = 'client_secret.json'        # credentials file name
APPLICATION_NAME = 'auto_update_caspar'

def get_credentials():
"""Gets valid user credentials from storage.

If nothing has been stored, or if the stored credentials are invalid,
the OAuth2 flow is completed to obtain the new credentials.

Returns:
    Credentials, the obtained credential.
"""
home_dir = os.path.expanduser('~')
credential_dir = os.path.join(home_dir, '.credentials')
if not os.path.exists(credential_dir):
    os.makedirs(credential_dir)
credential_path = os.path.join(credential_dir,
                               'auto_update_client_caspar.json')

store = Storage(credential_path)
credentials = store.get()
if not credentials or credentials.invalid:
    flow = client.flow_from_clientsecrets(CLIENT_SECRET_FILE, SCOPES)
    flow.user_agent = APPLICATION_NAME
    if flags:
        credentials = tools.run_flow(flow, store, flags)
    else: # Needed only for compatibility with Python 2.6
        credentials = tools.run(flow, store)
    print('Storing credentials to ' + credential_path)
return credentials

def main():
"""Shows basic usage of the Sheets API.

Creates a Sheets API service object and prints the names and majors of
students in a sample spreadsheet:
https://docs.google.com/spreadsheets/d/1k7OmDU_QUrCPVmsEpWFRCj-4BOu6PcUb7-SQlA7T_8I/edit
"""
credentials = get_credentials()
http = credentials.authorize(httplib2.Http())
discoveryUrl = ('https://sheets.googleapis.com/$discovery/rest?'
                'version=v4')
service = discovery.build('sheets', 'v4', http=http,
                          discoveryServiceUrl=discoveryUrl)

spreadsheetId = '1lEJeSNe5T3rNXEEMjY4D04QkoW-ngOeiFo40_S4H4FI'
rangeName = 'stress_temp!A3'

result = service.spreadsheets().values().get(
    spreadsheetId=spreadsheetId, range=rangeName).execute()
print (result)
values = result.get('values', [])

if not values:
    print('No data found.')
else:
    print('Name, Major:')
    for row in values:
        # Print columns A and E, which correspond to indices 0 and 4.
        print('%s' % row[0])

value_input_option = 'RAW'
range_name = 'stress_temp!A3'
values = [['aa']]
data = [
    {
        'range': range_name,
        'values': values
    },
]`enter code here`
body = {
  'valueInputOption': value_input_option,
  'data': data
}
result = service.spreadsheets().values().batchUpdate(
    spreadsheetId=spreadsheetId, body=body).execute()

if __name__ == '__main__':
main()

Body:
In Python, I use this piece of code and it work.

from googleapiclient.discovery import build
from google.oauth2 import service_account

SCOPES = ["https://www.googleapis.com/auth/drive", "https://www.googleapis.com/auth/drive.file",
                  "https://www.googleapis.com/auth/spreadsheets"]
SERVICE_ACCOUNT_FILE = 'credentials.json'

credentials = service_account.Credentials.from_service_account_file(SERVICE_ACCOUNT_FILE, scopes=SCOPES)
service = build('sheets', 'v4', credentials=credentials)

spreadsheetId = "O188999ITC"
sheetid_src = "123a"
notes = {
            "updateCells": {
                "range": {
                    "sheetId": sheetid_src,
                    "startRowIndex": 1,
                    "endRowIndex: 1,
                    "startColumnIndex": 1,
                    "endColumnIndex": 1
                },
                "rows": [
                    {
                        "values": [
                            {
                                "note": "my note"
                            }
                        ]
                    }
                ],
                "fields": "note"
            }
        }
body = {"requests":[notes]}
result = service.spreadsheets().values().batchUpdate(
    spreadsheetId=spreadsheetId, body=body).execute()

Note are available in API with cellData, so you have to update values of differents cells with the keyword "Notes".

You can find more information here :
https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets/cells#celldata